ReactJs中调用setState后立即读取state仍为旧值问题求助

问题根因 #

• React 中 setState 是异步批量执行的，调用 setState 后 React 不会立刻更新组件的 state 对象，而是会把多个更新请求合并后再统一执行重渲染流程，因此你在 setState 调用后立刻执行 validation() 读取 this.state，拿到的还是更新前的旧值。
• 代码还存在一个隐藏问题：计算 text 时传入的 this.state 也是更新前的旧值，如果 GetText 方法依赖最新的 wordCount 计算结果，最终得到的 text 也会不符合预期。

修复方案 #

如果 GetText 不需要依赖本次更新的 wordCount 计算结果，直接将 validation 放到 setState 的第二个回调参数中即可，该回调会在 state 完全更新完成后触发：

handler(data){
  console.log('Arrived',data)
  this.setState(
    {
      wordCount:data,
      text:GetText(data,this.state)
    },
    () => {
      this.validation(); // 此处读取的state为更新后的最新值
    }
  );
}

如果 GetText 需要依赖本次更新的 wordCount 计算结果，推荐使用函数式更新写法，保证计算时拿到的状态是最新的：

handler(data){
  console.log('Arrived',data)
  this.setState(
    // 函数式更新第一个参数为上一次的最新状态，不受批量更新逻辑影响
    (prevState) => {
      return {
        wordCount: data,
        text: GetText(data, prevState)
      }
    },
    () => {
      this.validation();
    }
  );
}

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