CODEWITHSUNDEEP
reactjsreact-nativesetstate
Ahtsham Shoukat
Ahtsham Shoukat

Reputation: 379

how to get updated state value after updating in a function

I'm trying to get login user detail. I need to put data to state and used the same state for further processing it takes time to put data to state and use this data. nearly it takes 2- 3 sec to use the state with that data.

I solved this issue if we use setTimeOut() function with 3 sec so that we it updates data in this time. if we don't use setTimeOut() and use state wright after updating it then it will provide initial data of the state.

complete_date = date + ":" + month + ":" + year;

var query = firebase.database().ref('attendence/'+ complete_date +"/").orderByKey();

email_match=false;
entry_time =null,
l_id = null,

query.on("value",(data)=> 
{
  data.forEach(function(childs) 
  {
    l_id = childs.key;
      // __ to check if the user already loged in before.
    var att_query = firebase.database().ref('attendence/'+ complete_date +"/"+ l_id).orderByKey();
    att_query.once("value",(data)=> 
    {
      if(email == data.child('email').val())
      {
        email_match =  true;
        entry_time = data.child('timeEntry').val();
      }
    }); //  
  });  // 

  this.setState({ last_id:l_id });
  this.setState({ emailMatchState:email_match });
  this.setState({alreayLogedState : entry_time});

}); // _____end of query.on("value",(data)=> 

setTimeout(() => 
{
console.log("-----------------------------------");
console.log("already logged :",this.state.alreayLogedState," email match :",this.state.emailMatchState , " result  : ", this.state.result , " last_id :",st.last_id);
console.log("-----------------------------------");
},3000);

I need to use state after updating without the use of setTimeout() for faster working of the application.

Upvotes: 3

Views: 888

Answers (2)

Jeff Hechler
Jeff Hechler

Reputation: 285

setState takes an optional second argument that gets called after the updates to the state object have taken place.

example:

let callback = () => {
 // do something
}

this.setState({
 keyToUpdate: valueToUpdate
}, callback)

Additional reading about the use of this callback: https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296?gi=18aa91e88437

Also, unless something is happening in between the seperate calls, these:

this.setState({ last_id:l_id });
this.setState({ emailMatchState:email_match });
this.setState({alreayLogedState : entry_time});

can be simplified to this:

this.setState({ 
 last_id:l_id,
 emailMatchState: email_match, 
 alreayLogedState: entry_time
}); //optionally add callback

Upvotes: 1

Dupocas
Dupocas

Reputation: 21357

The second argument for setState is a callback to execute when all updates are done

 this.setState({ last_id:l_id }, () => console.log(this.state.last_id))

Upvotes: 3

Related Questions