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

Question

i am a child and parent component where i am trying to pass data from child to parent but the issue is after passing the data and setting a state to it i get nothing in console when i console.log it the first time but then after clicking the submit button second time i am getting the result or say it is running behind 1 step..

I did it like this

parent component

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;

so here after submitting the form when in onsearch function i try to console log (this.state.item) for the very first time i get empty result but in the same function when i first console log (term) i am getting the result

Output:

child component

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}) is asynchronous; so the statement console.log(this.state.item) get executed before setState finishes executing.

To log the value after setState has completed, you can pass a function as second parameter to get the state correctly after completion like this:

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

Answer 2

That probably happens because state is "asynchronous". To console log after the state is set, you should call a callback function in this.setState...

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

I hope this helps

Answer 3

So its important to remember in React that setState is asynchronous (checkout that link its very informative) So your state value is getting set, but it isn't immediately available after setting it in that function because its async but your function is synchronous. if you were to plop that console.log into the componentDidUpdate() method you will see that calling setState() will re-render the component with the new state variable;