reactjs - 使用 setInterval 函数更新 React 组件的状态

Question

我正在研究 React 中的 Timer 实现。

export default function Parent() {
  const [count, setCount] = useState(0);

  function start() {
    setInterval(() => {
      setCount(count + 1);
    }, 1000);
  }

  return (
    <>
      <div>Parent Component</div>
      <p> value of count is: {count}</p>
      
      <button onClick={start}>Start counter</button>

      
    </>
  );
}

当我单击开始计数器按钮时，它只会增加一次计数，不知何故我发现我需要使用 useEffect。但不知道该怎么做。

请帮忙。

标签： reactjsreact-functional-component

Answer 1

经典计时器陈旧状态错误。您正在计时器间隔回调函数中访问关闭的陈旧状态。

这可以通过使用功能状态更新轻松解决，因此您不使用关闭的初始状态值。

export default function Parent() {
  const [count, setCount] = useState(0);

  function start() {
    setInterval(() => {
      setCount(count => count + 1);
    }, 1000);
  }

  return (
    <>
      <div>Parent Component</div>
      <p> value of count is: {count}</p>
      
      <button onClick={start}>Start counter</button>

      
    </>
  );
}

演示