React setState异步更新不及时 如何将最新state值传递给子组件

核心问题原因 #

• 代码存在语法错误和冗余调用，导致状态更新逻辑异常
• React的setState是批量异步更新的，多次分开调用setState会被合并，状态更新完成前无法拿到最新值

具体修复步骤 #

1. 修复getReport方法的语法与调用逻辑 #

首先删除方法内多余的});闭合符和末尾的冗余this.passVariable(val)调用，同时将多次setState合并为一次，减少不必要的重渲染，确保状态更新完成后再执行回调：

getReport(ReportList, val) {
  // console.log('supply plant=' + ReportList && ReportList[0] && ReportList[0].SPCode);
  alert('Row Value=' + val);
  // 合并所有状态更新到单次setState调用
  this.setState({
    rowvalue: val,
    showing: true,
    table: false,
    disable: false,
    ReportList: ReportList // 原代码中的rows属于笔误，替换为传入的参数ReportList
  }, this.passVariable); // 回调仅在状态全部更新完成后触发
}

passVariable() {
  // 此时状态已更新完成，直接取this.state里的最新值即可
  this.props.getReport(this.state.ReportList, this.state.rowvalue);
}

2. 优化子组件逻辑避免冗余 #

你子组件ApprovalPAG中定义的modal、fade状态仅在constructor初始化时赋值一次，后续父组件props更新不会同步到子组件state，不过你当前Modal组件直接读取的是props传入的modalpag、fadepag，不影响rowvalue的读取，可直接删除无用的子组件state避免混淆：

class ApprovalPAG extends React.Component {
  // 删掉无用的constructor和内部state定义
  click = () => {
    alert('Row ID=' + this.props.rowvalue);
  };

  render() {
    // 原有render逻辑保持不变即可
  }
}

3. 排查验证逻辑 #

如果修复后仍出现undefined，按以下顺序排查：

• 父组件getReport方法中传入的val是否为有效值，可在setState前打印val确认
• 在父组件render函数中打印this.state.rowvalue，确认打开弹窗时父组件的rowvalue已经更新为目标值
• 检查父组件传递props给ApprovalPAG时的属性名是否正确，当前你写的rowvalue={this.state.rowvalue}是正确的

注意：只要父组件的state.rowvalue更新完成，子组件读取的this.props.rowvalue会自动同步为最新值，不需要额外处理，只有在状态未更新完成前读取才会拿到旧值。

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