在`setState`回调中执行时，增量变得混乱[重复]

Question

我有一个代码，其中state 应该每 2 秒增加 1。 setState 在setInterval 回调中被调用，但我没有使用setState 的典型形式：setState(newState) 我使用了回调形式setState(() => {...})，奇怪的事情开始发生。状态不是递增 1，而是递增 2。

这是有问题的代码的简化：

const handler = () => {
   let val = 0;
   setInterval(() => {
      setState(() => {
        console.log("before inc", { val });
        val = val + 1;
        console.log("after inc\n--------", { val });
        return val;
      });
    }, 2000);
}

预期的日志是：

before inc {val: 0}
after inc {val: 1}
-------- 
before inc {val: 1}
after inc {val: 2}
-------- 

但是我得到了：

before inc{val: 0}
after inc {val: 1}
-------- 
before inc {val: 2}
after inc {val: 3}
-------- 

这太奇怪了。发生了什么？

游乐场：codesandbox

Answer 1

发生这种情况是因为您的 App 被 <React.StrictMode> 包裹。 Strict Mode 在开发中两次渲染你的组件以发现任何问题，这可能会导致一些类似的副作用。

如果您删除包装 <React.StrictMode> 标记，您的组件将呈现一次，您的代码将按预期工作。