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”中的状态未更新可能有多种原因：

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

您在另一个“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

为您提供了setData函数；

const fn = num =>{
  setData(state=>[...state,num])
}

反应挂钩useCallback不反映更新状态

3 个答案: