为什么我的 React 状态不在 `setInterval` 内更新？

在 setInterval 中使用 React State Hook 时状态不更新

在 React 的新 Hooks 功能中，时钟组件设计用于显示时间值每秒都在增加。尽管计时器运行，时间值仍停留在 1。

问题的原因

这个问题的根源在于 setInterval 的闭包。此闭包中的回调函数只能访问时间变量的初始值。由于 useEffect() 函数在第一次渲染后不会执行，因此回调不会接收后续时间值。

时间值访问

因此，时间变量始终setInterval 的回调中携带初始值 0。

解决方案：使用 State 的回调形式Hooks

与传统的 setState 方法类似，状态钩子提供两个选项：第一个接受更新的状态，而回调形式接收当前状态。要解决此问题，建议使用回调形式并在 setState 回调中递增之前获取最新的状态值。

替代方法

Dan Abramov 的博客文章深入研究了 setInterval 与钩子的使用，为这个问题提供了不同的解决方案。强烈建议阅读它。

更新的代码

以下代码演示了正确的实现：

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (<div>Seconds: {time}</div>);
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

以上是为什么我的 React 状态不在 `setInterval` 内更新？的详细内容。更多信息请关注PHP中文网其他相关文章！