如何使用setInterval中的state来更新状态？

Question

我必须每 1 秒更新一次

timers

。计时器是一张地图。目前，当运行 setInterval 时，它会关闭其中已存在的值，因此其中的时间不会更新。

我想每秒更新

timers

内部的ID

Answer 1

这是一个很常见的问题。因此，在 React 中，每次设置状态时，您都不会修改现有状态，而是“创建”它的新版本。在您的代码中，您实际上重复使用相同的状态值。 举一个更简单的例子，假设你有一个状态变量

count

，初始值为100，当你在

setCount(count + 1)

内部调用

setInterval

时，你实际上每秒都在调用

setCount(101)

。这里正确的做法是

setCount(currentCount => currentCount + 1)

。那么让我们回到您的代码，您还需要确保根据当前值更新状态。更新后的代码应如下所示：

if (props.isActive) {

  interval = setInterval(() => {
    props.setTimers(currentTimers => {
      const updatedTimers = { ...currentTimers };
      const currentTime = updatedTimers[props.id].time;
      updatedTimers[props.id] = {
        ...updatedTimers[props.id],
        time: currentTime + 1,
      };
      return updatedTimers;
    });
  }, 1000);

}