React：将 props 传递给父级 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 在我的子组件上时，它 returns 我想传递的数据，但是当我在 calback 我的父组件上这样做时，它 returns <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 and especially this comment。

React：将 props 传递给父级 returns <empy string>

React: Passing props to parent returns <empy string>

state

parent

reactjs