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

Question

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

当我从一个切换到另一个时，我正在创建一个选项卡式界面，一个组件应该首先通过Player返回函数注销自身（从父状态清除一些值），然后重新注册自身（设置一些值）在父级中）。但是，清理似乎不起作用。也就是说，该值在注册功能启动之前不会更改。

第一次在控制台日志中记录一个空对象作为初始值。但是，当单击tab20时，记录的值将显示注销前的状态。

这是什么问题？

我希望发生的是：

（应用程序加载）->控制台日志：{}-> [注册] aaa设置为1->（“切换”标签）-> [取消注册] aaa设置为未定义->控制台日志：{aaa：未定义（但是是1）}-> [注册] aaa设置为1

Answer 1

（应用程序加载）->控制台日志：{}-> [注册] aaa设置为1->（“切换”标签）-> [取消注册] aaa设置为未定义->控制台日志：{aaa：未定义（但是是1）}-> [注册] aaa设置为1

实际上是：

（应用程序加载）->控制台日志（myVal）：{}-> [注册] 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 };
  });
}, []);