如何在调用其他函数更新state后立即获取最新的state值

问题原因 #

React 中的setState是异步批量执行的，调用setState后不会立刻修改this.state的取值，因此调用checkValidation后立刻访问this.state.isError拿到的始终是更新前的旧值。

可行解决方案 #

方案1：让checkValidation直接返回校验结果（最推荐，性能最优）

不需要等待state更新完成，直接将校验计算出的结果返回给submit函数使用即可：

submit = () => {
  const isError = this.checkValidation();
  console.log(isError) // 可直接拿到最新的校验结果
}

checkValidation = () => {
  // 此处为你的实际校验逻辑，计算得到isError的最终值
  const isError = true;
  this.setState({
    isError: isError
  })
  // 直接将结果返回给调用方
  return isError;
}

方案2：使用setState的回调函数，等待状态更新完成后执行后续逻辑

如果业务逻辑必须依赖更新后的state，可以利用setState第二个参数（状态更新完成后的回调函数）实现：

submit = () => {
  this.checkValidation(() => {
    // 回调会在state更新完成后触发，此时可拿到最新值
    console.log(this.state.isError)
  });
}

checkValidation = (callback) => {
  this.setState({
    isError: true
  }, callback)
}

如果偏好同步风格的写法，也可以将setState封装为Promise配合async/await使用：

submit = async () => {
  await this.checkValidation();
  console.log(this.state.isError) // 可拿到最新值
}

checkValidation = () => {
  return new Promise((resolve) => {
    this.setState({
      isError: true
    }, resolve)
  })
}

方案3：使用flushSync强制同步更新（不推荐，会影响渲染性能）

React 18+版本可使用flushSync强制打断批量更新机制，让setState同步生效，该方案会降低渲染性能，非必要不建议使用：

import { flushSync } from 'react-dom';

submit = () => {
  this.checkValidation();
  console.log(this.state.isError) // 可拿到最新值
}

checkValidation = () => {
  flushSync(() => {
    this.setState({
      isError: true
    })
  })
}

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