无法重写标题，因为标题已经很明确和清晰了

Question

我正在使用React Native中的Flashlist，并且在我的renderItem函数中使用了useCallback hook。在我的组件中，我有一个状态（一个数组）叫做todos，当我记录todos.length时，我只得到初始状态值0。为什么会这样，我该如何修复？

export default function MyComponent() {
  // 为了简洁起见，省略了一些代码。
  const [todos, setTodos] = useState<string[]>([]);
  const renderItem = useCallback(
    ({ item }: ListRenderItemInfo<Todo>) => (
      <TouchableOpacity
        style={{ height: 50 }}
        onPress={() => {
          console.log(todos.length); // 总是记录0。
          if (todos.length >= 10) return;
          setTodos((curr) => [item.name, ...curr]);
        }}
      >
        <Heading color={"black"}>{item.name}</Heading>
      </TouchableOpacity>
    ),
    []
  );

  return (
    <FlashList<Todo>
      data={data?.todos as Todo[]}
      estimatedItemSize={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) => idx.toString()}
    />
  );
}

注意：我尝试将todos和todos.length都作为依赖项传递给useCallback，但结果是相同的。

乐意解答任何问题。

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提取为另一个子组件。这样做还有其他好处，比如更多的组合性、代码共享，最重要的是性能。