在setInterval内使用React状态挂钩时状态未更新

Question

我正在试用新的反应挂钩，并有一个时钟组件，计数器应该每秒钟增加一次。但是，该值不增加超过1。

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

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

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 1

原因是，传递到setInterval闭包的回调只访问第一次渲染中的时间变量，它不能访问后续渲染中的新时间值，因为use效应（）不会第二次调用。

time在setInterval回调中始终具有值0。

像您熟悉的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'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>