React跨子组件传值问题：子B→父A→子C状态未即时更新

兄弟，你碰到的这个状态延迟更新的问题，本质是React类组件里setState的异步特性导致的，我来给你一步步讲清楚怎么解决：

为什么会出现状态延迟？ #

setState并不是同步更新状态的，React会把状态更新操作放进队列，等合适的时机再批量执行。所以你在调用setState之后立刻打印this.state.selectedvalue，拿到的其实还是更新前的旧值——这就是为什么第一次打印data正确，但state是undefined，后续变更时state显示上一次的值。

怎么确认状态更新完成？ #

你可以利用setState的第二个参数（回调函数），这个回调会在状态更新完成、组件重新渲染后执行，此时你就能拿到最新的状态值了：

onchange=(data) => { 
  this.setState({ selectedvalue: data }, () => {
    // 这里的state已经是更新后的最新值
    console.log("更新后的selectedvalue:", this.state.selectedvalue);
  }); 
  console.log("当前传入的data:", data); // 这个是实时的，没问题
}

如何把最新值传递给子组件C？ #

其实只要在父组件A的render方法里，把this.state.selectedvalue作为props传递给C组件就可以了：

render() {
  return (
    <div className="parent-container">
      <ChildB onchange={this.onchange} />
      {/* 直接把最新的state传给C */}
      <ChildC selectedValue={this.state.selectedvalue} />
    </div>
  );
}

当setState完成更新后，父组件A会重新渲染，此时C组件会自动接收到最新的selectedValueprops。如果C是类组件，你可以在componentDidUpdate钩子中处理props的变化；如果是函数组件，直接使用props.selectedValue即可，或者用useEffect监听这个props的变化来做后续操作。

额外提醒 #

确保你已经正确绑定了onchange方法（你说已经绑定了，这点没问题），比如在构造函数里绑定：

constructor(props) {
  super(props);
  this.state = {
    selectedvalue: undefined
  };
  this.onchange = this.onchange.bind(this);
}

或者使用箭头函数定义方法（你现在的写法就是箭头函数，也没问题）。

这样一套操作下来，子组件B的数据就能实时通过父组件A传递给子组件C啦！

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