javascript - SetInterval 未显示更新状态

Question

在调用 setInterval 函数之前，我已将状态设置为 true。但是即使 useEffect 钩子(Hook)被状态的新值触发，它也没有反射(reflect)在 setInterval 函数中。

在此处编写沙箱代码:https://jsfiddle.net/6e05tc2L/3/

let interval;
const Component = () => {
  React.useEffect(() => {
    console.log('State updated to', state);
  });
  const [state, setState] = React.useState(false);
  const on = () => {
    setState(true);
    interval = setInterval(() => {
      console.log(state);
    }, 1000);
    }
  const off = () => {
    setState(false);
    clearInterval(interval);
  }
  const toggle = () => state ? off() : on()

  return (<div>
    <button onClick={toggle}>Toggle State</button>
   </div>);
}

ReactDOM.render(
  <Component />,
  document.getElementById('container')
);

更新后它不应该使用较新的状态值吗？

Answer 1

传递给 useEffect 的函数内的值在每次渲染时都会刷新，因为 useEffect 使用传递给它的函数的新定义。

但是传递给 setInterval 的函数只定义一次，它会关闭 state 的旧陈旧值。尚未更新。

闭包使用钩子(Hook)很棘手，但要意识到的是 useEffect 为每个渲染创建一个新函数，因此每次函数关闭时都会产生一个新的状态值。

技巧是在 useEffect 本身中调用与 setInterval 相关的代码，它本身取决于 state 的变化值

React.useEffect(() => {
  if(state) {

    interval = setInterval(() => {
      console.log(state);
    }, 1000);
  } else {
    clearInterval(interval);
  }

}, [state]);

或者，更好的是，使用一个 useInterval 钩子(Hook)来为您处理这些细节。