javascript - this.state.foo is different in _onChange and different in render()? -

in _onchange method, wait change in this.state.name. on change _updatearticle method called:

_onchange() {          var team = this.getteamstate();         this.setstate({name: team});         console.log(this.state.name); //"boston celtics" //this should have changed didn't          this.unbind("articles");         this._updatearticle();     }, 

then in _updatearticle new reference created using new state.

_updatearticle(team) {         var teamref = new firebase(this.props.baseurl + team + "/results");         console.log(this.state.team); // "boston celtics" //this should have been new not         this.bindasarray(teamref, 'articles');      }, 

in render method check state put console.log check. in render, this.state.name has been updated properly. question why this.state different outside of render function?.

as per api docs:

setstate() not mutate this.state creates pending state transition. accessing this.state after calling method can potentially return existing value.

if want access state right after calling setstate, use callback parameter in setstate method:

setstate(function|object nextstate[, function callback])

so code should like:

_onchange() {   var team = this.getteamstate();   this.setstate({name: team}, function() {     console.log(this.state.name);     this.unbind("articles");     this._updatearticle(this.state.team);   }); } 

hope helps.