Javascript 主组件比其子组件晚一步获取数据

我有一个主组件，它有一个子组件，它有一个搜索表单

尽管还没有任何功能，但我希望确保我的主要组件获得我在搜索栏中键入的值。然而，我注意到我的主组件比我的子组件晚一步获得数据

主要成分

发生了什么，为什么，我如何解决

提前感谢

设置状态是异步的，因此当您在调用this.setState之后尝试console.logthis.state.input时，您的状态尚未更新

在ChildComponent中，您正从实时发生的事件中记录数据

如果希望主组件记录相同的日志，可以执行以下操作：

handleFilterInput(value) {
    this.setState({input: value}, () => console.log(this.state.input));

}

setState的第二个参数是一个在状态更新时执行的函数

您还可以在主组件中使用componentDidUpdateprevProps和prevState：

componentDidUpdate() {
    console.log(this.state.input);
}

---

那么，这是否意味着，即使我在控制台中没有看到正确的元素，结果已经很好了，但在console.log显示结果后效果很好？是的-您的状态正在更新为相同的值，但还没有更新到您记录的时候谢谢您的回答，我仍然很难处理异步内容：

child_component.js:21 a
main.js:116 *null*
child_component.js:21 ar
main.js:116 a
child_component.js:21 art
main.js:116 ar
child_component.js:21 arti
main.js:116 art
child_component.js:21 artic
main.js:116 arti
child_component.js:21 articl
main.js:116 artic
child_component.js:21 article
main.js:116 articl

handleFilterInput(value) {
    this.setState({input: value}, () => console.log(this.state.input));

componentDidUpdate() {
    console.log(this.state.input);
}