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

演示