这归结为闭包在Javascript中的工作方式。给定的函数将从初始渲染中
setTimeout获取
flag变量,因为
flag它不会发生突变。
您可以改为将函数作为参数
toggleFlag。此函数将获取正确的
flag值作为参数,并且此函数返回的值将替换状态。
例
const { useState } = React;function App() { const [flag, toggleFlag] = useState(false); const _onClick = () => { toggleFlag(!flag); setTimeout(() => { toggleFlag(flag => !flag) }, 2000); }; return ( <div className="App"> <button onClick={_onClick}>{flag ? "true" : "false"}</button> </div> );}ReactDOM.render(<App />, document.getElementById("root"));<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="root"></div>


