用 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>
  );
}

Here is its demo

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

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

Here is its demo

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

我应该如何正确编写它并看到计数器按预期每 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>
  );
}

演示