将数据从子级传递到父级并设置状态

Question

我是一个孩子和父母的组件，我试图将数据从孩子传递给父母，但问题是在传递数据并为其设置了状态后，当我第一次进行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）我得到空结果，但是当我第一次控制台日志（term）时却在同一个函数中结果

输出：

子组件

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;

Answer 1

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

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

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

Answer 2

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

中调用回调函数

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

我希望这对您有帮助

Answer 3

因此在React中要记住的重要一点是setState是asynchronous（检出该链接，它的信息非常丰富）。因此，您正在设置状态值，但是在该函数中对其进行设置后，状态值将立即变为可用，因为它的异步但您的功能是同步的。如果您要将console.log放入componentDidUpdate()方法中，则会看到调用setState()将使用新的状态变量重新呈现组件；