typescript React useCallback在依赖项更改时不更新

i2byvkas  于 2023-11-20  发布在  TypeScript
关注(0)|答案(1)|浏览(247)

useCallback不断捕获其依赖项的错误值。

const [state, setState] = React.useState(0);

  const callback = React.useCallback(() => {
    console.log(state); // prints 0 why???????
  }, [state]);

  React.useEffect(() => {
    setState(1);
    return () => {
      callback(); // only called here, clearly after the state is set to 1
    };
  }, []);

字符串
我希望能够从useCallback回调中访问useCallback依赖列表中的所有内容,而不会出现任何问题。
如果两者都产生相同的输出,那么不使用useCallback有什么区别:

const callback = () => {
    console.log(state); // prints 0
  };


注意:这也不起作用,因此“effect callback is capturing the“wrong”callback.”是false。

React.useEffect(() => {
    setState(1);
    return callback;
  }, []);

useCallback显然没有捕获其依赖项的正确值

这是可行的,但不是我想要的:
使用ref而不是state(React.useRef)可以工作,调用state的setState函数并从该调用内部访问先前的也可以工作。但我不想这样做,我想直接访问state,因为根据文档,state应该是最新的。

sz81bmfz

sz81bmfz1#

问题不在于useCallback,它可以工作并且具有正确的依赖关系。
无论是有useCallback的版本还是没有useCallback的版本,问题都在于您从一个效果钩子的cleanup函数中调用callback(),而 that 效果回调函数正在捕获“错误的”callback
我想直接访问状态,因为根据文档,状态应该是最新的。
不,const state不会(也不能)更新。参见The useState set method is not reflecting a change immediately,“stale closure”问题和useEvent提案。你真的需要useRef从第一次渲染时创建的旧闭包访问当前状态,没有办法。

相关问题