反应：将道具传递给父母会返回

Question

首先，我将代码放在这里，我将解释发生了什么。

Parent.js

callback = (id) => {
    this.setState({des: id});
    console.log(this.state.des);
}

//on my render i have this when i call my child component
<Child callback={this.callback}/>

Child.js

handleChange = (event) => { 
    let des = event.target.value;
    console.log(des);
    this.props.callback(des);
};

[当我在子组件上的console.log时，它返回我要传递的数据，但是当我在我的父组件上的calback中执行该数据时，它返回<empty string>，但我不知道为什么会发生这种情况。

Answer 1

之所以发生这种情况是因为setState是一个异步函数。当您尝试记录this.state.des时，尚未设置状态。如果要控制台记录状态以查看是否已按预期设置，则要做的是将其记录在this.setState的回调中（以便在知道状态设置后立即记录）。在您的parent.js中尝试以下内容：

callback = (id) => {
   this.setState({des: id}, () => {
       console.log(this.state.des); 
   });
}

有关详细信息，请参见setState的React Docs

Answer 2

对setState的调用是异步的，因此，如果在调用setState之后直接访问更新的状态，则可能无法读取更新的状态。因此，setState(updater[, callback])实际上公开了一个回调，该回调可用于依赖于完成状态更新的操作。 （这在react docs for setState中有解释。）

根据您的情况，像这样调整回调函数

callback = (id) => {
    this.setState({des: id}, () => {
        console.log(this.state.des);
    });
}

应该做到这一点。

如果您想了解有关setState异步的原因的更多信息（即使开始时可能有些混乱，例如您的情况，则应签出this github issue，尤其是this comment。