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

Question

我在这里做了一个例子： https://codesandbox.io/s/cocky-brattain-de5r4

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

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

这里有什么问题？

我期望发生的是：

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

Answer 1

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

其实是：

（应用程序加载）-> 控制台日志（myVal）：{} -> [register]aaa 设置为 1 ->（切换选项卡）-> 使用 (myVal = {aaa:1}) -> [unregister]aaa 设置为 undefined -> 控制台日志：{aaa: 1} （因为之前的关闭）更新寄存器内的闭包

问题在于，当您切换选项卡时，组件会重新呈现，并且 register 函数会重新声明，这会更新其关闭 (myVal)。

要修复它（记录结果），请摆脱闭包：

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