Javascript React can'；I don’我不知道如何相应地向我的父母发送数据

我想创建这个React自动售货机，我需要将一些id值从一个子系统发送到父系统，然后生成一些需要该值的函数

我已经成功地实现了正确的功能，但它的行为不像我想要的那样。当我第一次单击该按钮时，我的查询将被更新，但不会传输到父组件。只有当我第二次单击时，我的父母才会更新为以前的状态。所以总是迟到一个州

class App extends Component {
  constructor() {
    super()
    this.handleData = this.handleData.bind(this);
    this.state = {
      fromChild: ""
    }
  }
  handleData(data) {
  this.setState({
    fromChild: data
  });
}

  render() {
    return (
      <div className="App">
        <Glass />
        <FrontPanel handlerFromParent={this.handleData.bind(this)}/>
        <h5>Received by parent:<br />{this.state.fromChild}</h5>
      </div>
    );
  }
}



class FrontPanel extends Component {
  constructor(){
    super()
    this.state = {
        query: ""
      }


  }

/* function that manages the keybord */
addToQuery = (id) => {
  this.setState((prevState) => ({
  query: prevState.query + id
  }))
  this.onChangeQuery();
}
/* function that sends data to parent */
onChangeQuery() {
  this.props.handlerFromParent(this.state.query)
}
  render() {

    return (
      <div>

          <Screen
            credit={this.state.credit}
            query={this.state.query}/>

          <div className="keybord-layout">
          <div className="keybord">
          <button onClick={e => this.addToQuery(e.target.id)} id="1">1</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="2">2</button>
          <button onClick={e => this.addToQuery(e.target.id)} id="3">3</button>
          </div>
          </div>
      </div>
    )
  }
}

export default FrontPanel;

类应用程序扩展组件{
构造函数（）{
超级（）
this.handleData=this.handleData.bind（this）；
此.state={
fromChild:“
}
}
handleData（数据）{
这是我的国家({
fromChild：数据
});
}
render（）{
返回(
由父级接收：
{this.state.fromChild}
);
}
}
类前面板扩展组件{
构造函数（）{
超级（）
此.state={
查询：“
}
}
/*管理keybord的函数*/
addToQuery=（id）=>{
this.setState（（prevState）=>({
查询：prevState.query+id
}))
this.onChangeQuery（）；
}
/*将数据发送到父级的函数*/
onChangeQuery（）{
this.props.handlerFromParent（this.state.query）
}
render（）{
返回(
this.addToQuery（e.target.id）}id=“1”>1
this.addToQuery（e.target.id）}id=“2”>2
this.addToQuery（e.target.id）}id=“3”>3
)
}
}
导出默认前面板；

---

我希望当我点击一个按钮时，立即将状态转移到父级，而不是等待再次按下按钮。另外，我不希望状态在父级中落后。

调用

setState

是异步的，因此

此.state.query在调用
this.onChangeQuery（）时可能尚未更新

尝试在回调函数中调用父处理程序，该函数可以传递给
setState

this.setState(
  prevState => ({
    query: prevState.query + id
  }),
  () => this.onChangeQuery()
);

这样，当您将
query
传递回父级时，可以确保它是新值。
。可能重复的