React hooks 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

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

“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
   

请核实您是否属于这种情况。