Der Titel kann nicht umgeschrieben werden, da er bereits eindeutig und klar ist

Question

Ich verwende Flashlist in React Native und verwende den Hook useCallback in meiner Funktion renderItem In meiner Komponente habe ich einen Zustand (ein Array) namens todos und wenn ich todos.length protokolliere, erhalte ich nur den Anfangszustandswert 0. Warum passiert das und wie kann ich es beheben?

export default function MyComponent() {
  // Der Kürze halber wurde ein Teil des Codes weggelassen.
  const [todos, setTodos] = useState<string[]>([]);
  const renderItem = useCallback(
    ({ item }: ListRenderItemInfo<Todo>) =>
      <TouchableOpacity
        style={{ height: 50 }}
        onPress={() =>
          console.log(todos.length); // Immer 0 protokollieren.
          if (todos.length >= 10) return;
          setTodos((curr) => [item.name, ...curr]);
        }}
      >
        <Heading color={"black"}>{item.name}</Heading>
      </TouchableOpacity>
    ),
    []
  );

  zurückkehren (
    <FlashList<Todo>
      data={data?.todos as Todo[]}
      geschätzteItemSize={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) => idx.toString()}
    />
  );
}

Hinweis: Ich habe versucht, sowohl todos als Abhängigkeiten an useCallback zu übergeben .

Bei Fragen stehe ich Ihnen gerne zur Verfügung.

Answer 1

const [todos, setTodos] = useState<string[]>([]);

和

const renderItem = useCallback(
  () => {
    //todo's here is a closure, it will not update
    //a dependency of [] means, just run once.
  },
  []
);

这是一个常见的问题，因为它不明显。因为这种情况经常发生，所以setState有一个回调版本。在你的代码中，你实际上是使用它来设置状态，但你还需要使用它来获取当前状态以进行最大10个的检查。

所以一个简单的解决方法是将长度检查放在useState的回调函数中。

setTodos((curr) => curr.length >= 10 ? curr : [item.name, ...curr]);

在上面的代码中，如果当前长度大于或等于10，只返回当前状态，否则添加新项目。

另一个选项，当然是将todos添加到useCallback的状态中，但为什么这在FlashList中不起作用，不确定。

更好的选择是将Item提取为另一个子组件。这样做还有其他好处，比如更多的组合性、代码共享，最重要的是性能。