React - useState - 为什么setTimeout函数没有最新的状态值？

9 浏览
0 Comments

React - useState - 为什么setTimeout函数没有最新的状态值？

最近我在研究React Hooks的时候遇到了一个问题/疑惑。

下面是一个基本的实现来复现这个问题，这里我只是在按钮点击时切换了flag（一个状态）变量。

  const [flag, toggleFlag] = useState(false);
  const data = useRef(null);
  data.current = flag;
  const _onClick = () => {
    toggleFlag(!flag);
    // toggleFlag(!data.current); // 可行
    setTimeout(() => {
      toggleFlag(!flag); // 为什么没有最新的值？
      // toggleFlag(!data.current); // 可行
    }, 2000);
  };
  return (
      
  );

我找到了一些其他方法来解决这个问题，比如使用useRef或useReducer，但这是否正确，或者是否有其他仅使用useState解决的方法？

另外，如果有人能解释一下为什么在setTimeout内部我们获得的是旧的状态值，那将非常有帮助。

Sandbox网址 - https://codesandbox.io/s/xp540ynomo

0