使用 setInterval 更改 useState 的值

Question

我有一个简单的组件，useState每次点击都会增加一个计数器 -

function Counter() {
  let [counter, setCounter] = useState(0);

  const incCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="App">
      <h1>{counter}</h1>

      <button onClick={incCounter}>Inc</button>
    </div>
  );
}

这是它的演示

现在我想每 1 秒调用一次增加函数，所以我将这段代码添加到组件函数中 -

useEffect(() => {
    setInterval(() => {
      incCounter();
    }, 1000);
  }, []); 

这是它的演示

但我没有看到组件中的计数器增加。

我应该如何正确编写它并看到计数器按预期每 1 秒增加一次？

Answer 1

问题

你有一个来自设置计时器回调的渲染周期的状态值的陈旧外壳。

解决方案

使用功能状态更新，以便从前一个状态更新状态，而不是更新进入队列的渲染周期中的状态。这允许间隔回调和单击处理程序无缝地更新状态，彼此独立。

setCounter(counter => counter + 1);

事实上，您应该在下一个状态值取决于任何先前状态值的任何时候使用功能状态更新。递增计数器是使用功能更新的经典示例。

不要忘记返回一个清理函数来清除组件卸载的时间间隔。

完整代码

function Counter() {
  let [counter, setCounter] = useState(0);

  const incCounter = () => {
    setCounter((counter) => counter + 1);
  };

  useEffect(() => {
    const timerId = setInterval(() => {
      incCounter();
    }, 1000);

    return () => clearInterval(timerId);
  }, []);

  return (
    <div className="App">
      <h1>{counter}</h1>

      <button onClick={incCounter}>Inc</button>
    </div>
  );
}

演示