时间戳

首页 > 解决方案 > 在`setState`回调中执行时，增量变得混乱

javascript - 在`setState`回调中执行时，增量变得混乱

问题描述

我有一个代码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}
--------

这太奇怪了。怎么了？

游乐场：密码箱

标签： javascriptreactjsreact-hooks

解决方案

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

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

推荐阅读