相关疑难解决方法(0)

最近我正在研究React Hooks，陷入一个问题/疑问？

下面是重现此问题的基本实现，在这里，我只是flag在单击按钮时切换（状态）变量。

  const [flag, toggleFlag] = useState(false);
  const data = useRef(null);
  data.current = flag;

  const _onClick = () => {
    toggleFlag(!flag);
    // toggleFlag(!data.current); // working

    setTimeout(() => {
      toggleFlag(!flag); // does not have latest value, why ?
      // toggleFlag(!data.current); // working
    }, 2000);
  };

  return (
    <div className="App">
      <button onClick={_onClick}>{flag ? "true" : "false"}</button>
    </div>
  );

我想出了一些其他方法来克服此问题，例如使用useRef或useReducer，但这是正确的吗？或者是否有其他方法只能通过useState解决此问题？

另外，如果有人解释为什么我们在setTimeout中获得旧的state值，这将非常有帮助。

沙盒网址-https: //codesandbox.io/s/xp540ynomo