reactjs - react : Passing props to parent returns <empy string>

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); 
   });
}

参见 React Docs对于 setState 了解更多详细信息