React 钩子 useCallback 不反映更新状态

Question

我有我的问题的简化版本如下：

const Component = () => {
  const [data, setData] = useState([]);

  const fn = useCallback((num) => {
    const newData = [...data];
    newData.push(num);

    setData(newData);
  }, [data]);

  return <button onClick={() => fn(Math.random())}>{data.join()}</button>;
};

我的问题是newData总是[] ，而不是反映更新的状态值。 因此，我的按钮将只显示最新的data值，而不是具有递增值的数组。 为什么会出现这种情况，因为我已将其包含在useCallback函数的依赖项数组中？

Answer 1

您的代码按您的预期工作：

https://codesandbox.io/s/relaxed-ishizaka-n2eg6?file=/src/App.js

它确实显示了更新的状态值。

Answer 2

我想问题很可能发生在您在问题中简化的“按钮”组件中，因此我们看不到真正的问题。

“useCallback”中的状态未更新可能有多种原因：

1. 您没有在“useCallback”的依赖项中添加状态。 这不是您的情况，因为您已经在依赖项中添加了数据

2. 您在另一个“useCallback”中使用了这个“fn”，并且没有添加 fn 作为该“useCallback”的依赖项。

    // what you probably write in the "button" component const handleClick = useCallback(() => { ... doSomethingWithState(someState); props.onClick(); //<--- this is the fn you passed }, [someState]); // what you should write const handleClick = useCallback(() => { ... doSomethingWithState(someState); props.onClick(); //<--- this is the fn you passed }, [someState, props.onClick]); //<---- you need to add the method as dependency as well

请验证这是否是您的情况。

Answer 3

我对我的问题有一个简化的版本，如下所示：

const Component = () => {
  const [data, setData] = useState([]);

  const fn = useCallback((num) => {
    const newData = [...data];
    newData.push(num);

    setData(newData);
  }, [data]);

  return <button onClick={() => fn(Math.random())}>{data.join()}</button>;
};

我的问题是newData始终为[] ，而不是反映更新后的状态值。 因此，我的按钮将仅显示最新的data值，而不显示具有递增值的数组。 为什么会出现这种情况，因为我已将其包含在useCallback函数的依赖项数组中？