React useEffect：返回函数中的setState没有及时更新状态

Question

我在从一个切换到另一个时制作了一个选项卡式界面，一个组件应该首先通过useEffect返回函数取消注册自己（从父状态清除一些值），然后重新注册自己（在父级中设置一些值）。 但是，清理似乎不起作用。 即该值在寄存器功能开始之前不会改变。

查看控制台日志，第一次记录一个空对象，作为初始值。 但是当点击 tab20 时，记录的值显示的是注销前的值。

这里有什么问题？

我期待发生的是：

（应用加载）-> 控制台日志：{} -> [注册]aaa 设置为 1 ->（切换选项卡）-> [取消注册]aaa 设置为未定义 -> 控制台日志：{aaa：未定义（但它是 1） } -> [注册]aaa 设置为 1

Answer 1

（应用加载）-> 控制台日志：{} -> [注册]aaa 设置为 1 ->（切换选项卡）-> [取消注册]aaa 设置为未定义 -> 控制台日志：{aaa：未定义（但它是 1） } -> [注册]aaa 设置为 1

其实它的：

(应用加载) -> 控制台日志 (myVal):{} -> [register]aaa 设置为 1 -> (switch tab) -> 使用 (myVal = {aaa:1}) 更新注册中的闭包 -> [取消注册]aaa 设置为未定义 -> 控制台日志：{aaa: 1}（因为之前的关闭）

问题是当您切换选项卡时，组件会重新渲染，并且会重新声明register函数，该函数正在更新其闭包 ( myVal )。

要修复它（日志结果），去掉闭包：

const register = useCallback(name => {
  setMyVal(prevState => {
    console.log(prevState);
    return { ...prevState, [name]: 1 };
  });
}, []);