React中如何在同一函数内获取更新后的State？

当然可以在同一个函数内获取更新后的state值！问题的核心在于你要理解React类组件中setState的异步批量更新特性：在合成事件或生命周期函数中调用setState时，React会把多个更新操作攒到一起批量执行，所以你在setState之后立刻访问this.state，拿到的肯定是还没更新的旧值。

下面给你几个实用的解决办法：

1. 直接使用预先计算好的新值（最推荐） #

既然你明确知道要把state更新成什么样子，完全没必要等React更新state后再去取——直接用你计算出来的新值就行：

state = { a: 1, b: 2 };
updateState = () => {
  const { a, b } = this.state;
  console.log("previous a", a);
  console.log("previous b", b);

  // 提前计算好要更新的新值
  const newA = b;
  const newB = 3;

  this.setState({ a: newA, b: newB });

  // 直接用预先计算的变量，就是更新后的值
  console.log("New a", newA);
  console.log("New b", newB);
};

这种方式最简单高效，避免了等待异步更新的麻烦。

2. 使用setState的回调函数（标准异步更新后获取） #

如果你的新值依赖于之前的state，或者必须从this.state中获取更新后的值，可以用setState的第二个回调参数——这个回调会在state更新完成并且组件重新渲染后执行：

state = { a: 1, b: 2 };
updateState = () => {
  const { a, b } = this.state;
  console.log("previous a", a);
  console.log("previous b", b);

  this.setState(
    { a: b, b: 3 },
    // 回调内的this.state已经是更新后的状态
    () => {
      console.log("New a", this.state.a);
      console.log("New b", this.state.b);
    }
  );
};

如果你说这个回调在应用中无法生效，建议检查：

• 是否在原生DOM事件（比如直接绑定的addEventListener）或setTimeout这类脱离React合成事件的环境中调用？这种场景下setState是同步的，回调会立刻执行，但也可以直接在setState后访问this.state拿到新值。
• 是否有其他代码阻止了回调执行（比如错误捕获漏掉了异常）？

3. 封装Promise版setState支持async/await #

如果你习惯用async/await的写法，可以自己封装一个返回Promise的setState方法：

state = { a: 1, b: 2 };

// 封装Promise版setState
setStateAsync = (updater) => {
  return new Promise(resolve => {
    this.setState(updater, resolve);
  });
};

updateState = async () => {
  const { a, b } = this.state;
  console.log("previous a", a);
  console.log("previous b", b);

  // await等待state更新完成
  await this.setStateAsync({ a: b, b: 3 });

  console.log("New a", this.state.a);
  console.log("New b", this.state.b);
};

原来的async/await没用是因为原生setState不返回Promise，这个封装刚好补上了这个缺口。

4. 函数式更新结合回调（处理依赖前序state的复杂场景） #

如果新state的值依赖于之前的state（比如累加、交换等），推荐用setState的函数式更新写法，同时结合回调获取最终state：

state = { a: 1, b: 2 };
updateState = () => {
  console.log("previous a", this.state.a);
  console.log("previous b", this.state.b);

  this.setState(
    prevState => {
      // 基于前一个state计算新值
      return { a: prevState.b, b: 3 };
    },
    () => {
      console.log("New a", this.state.a);
      console.log("New b", this.state.b);
    }
  );
};

这种写法能避免因为异步批量更新导致的state计算错误，同时保证回调拿到的是最新状态。

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