将数据从子级传递给父级并设置状态答案

【问题标题】：Passing data from child to parent and setting state将数据从子级传递给父级并设置状态
【发布时间】：2019-05-24 20:27:09
【问题描述】：

我是一个子组件和父组件，我试图将数据从子组件传递给父组件，但问题是在传递数据并为其设置状态之后，当我第一次使用 console.log 时，我在控制台中什么也得不到，但是然后在第二次单击提交按钮后，我得到了结果，或者说它落后了 1 步..

我是这样做的

父组件

import Todoinput from './components/todo-input';


class App extends React.Component{
constructor(props){
super(props);
this.state={
  item:''
}
}

onsearch=(term)=>{

console.log(term)
this.setState({item:term})
console.log(this.state.item)
}

render(){
return (
  <div className="app">
  <div className="todoinput">
  <Todoinput onafter={this.onsearch}/>
  </div>
  </div>
) 
} 
}

export default App;

所以在 onsearch 函数中提交表单后，我第一次尝试控制台日志（this.state.item）我得到空结果，但是当我第一次控制台日志（术语）时在相同的函数中我得到结果

输出：

子组件

class Todoinput extends React.Component{
constructor(props){
    super(props);
    this.state={
        term:''
    }
}

onformsubmit=(e)=>{
    e.preventDefault()

    this.props.onafter(this.state.term)
}

onchange=(e)=>{
    this.setState({term:e.target.value})


}

render(){
    return (

        <div className="card p-4">
        <form onSubmit={this.onformsubmit}>
        <div className="form-group">
        <input type="text" onChange={this.onchange} 
   className="form-control" placeholder="Add a Todo Item"/>
        </div>
        <button type="submit" className="btn btn-block btn- 
   primary">Submit</button>
        </form>
        </div>

    )
 }
}
 export default Todoinput;

【问题讨论】：

标签： reactjs

【解决方案1】：

this.setState({item:term}) 是异步的；所以语句console.log(this.state.item) 在setState 完成执行之前被执行。

要在setState 完成后记录值，您可以传递一个函数作为第二个参数来正确获取完成后的状态，如下所示：

this.setState({item:term}, () => console.log(this.state.item));

【讨论】：

【解决方案2】：

这可能是因为状态是“异步的”。设置状态后要控制台日志，应该在this.setState中调用回调函数...

onsearch=(term)=>{
 console.log(term)
  this.setState({item:term}, () => {
    console.log(this.state.item)
 })
}

希望对你有帮助

【讨论】：

【解决方案3】：

所以重要的是要记住在 React 中 setState 是 asynchronous （结帐链接它的信息非常丰富）所以你的状态值正在设置，但在该函数中设置它后它不会立即可用，因为它是异步的，但你的功能是同步的。如果您将该 console.log 放入 componentDidUpdate() 方法中，您将看到调用 setState() 将使用新的状态变量重新渲染组件；

【讨论】：