使用 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。但不知道该怎么做。

请帮忙。

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>

      
    </>
  );
}

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

Updating React component's state with setInterval function

reactjs

react-functional-component

演示