React中调用setState后无法立即获取最新状态值的问题如何解决？

• React 中 setState 是异步批量执行的，调用setState后不会立即修改当前的this.state值，而是会将更新任务加入队列，等当前作用域内的所有同步代码执行完毕后，才会合并更新、重渲染组件。所以你在setState后立刻打印this.state.MenuKey，拿到的是本次更新前的旧值。

方案1：使用setState的回调参数获取更新后的值 #

setState支持传入第二个参数作为回调函数，该函数会在state更新完成、组件重渲染后触发，此时可以拿到最新的state值。
代码示例：

onClick = (k) => {
  this.setState({MenuKey: k}, () => {
    // 回调内拿到的是最新值
    console.log(k, this.state.MenuKey)
  })
}

方案2：直接使用入参k #

如果你只是需要用到本次要更新的MenuKey值，直接使用传入的参数k即可，不需要从this.state中读取，k本身就是你要设置的最新值。
代码示例：

onClick = (k) => {
  this.setState({MenuKey: k})
  console.log(k, k) // 直接用k就是最新值
}

方案3（不推荐）：使用flushSync同步更新 #

如果确实需要立刻触发state更新，可以使用ReactDOM的flushSync方法强制同步刷新更新，但会破坏React的批量更新优化，可能导致性能问题，非必要不使用。
代码示例：

import { flushSync } from 'react-dom';

onClick = (k) => {
  flushSync(() => {
    this.setState({MenuKey: k})
  })
  console.log(k, this.state.MenuKey) // 此时可以拿到最新值
}

内容的提问来源于stack exchange，提问作者dfassf