CODEWITHSUNDEEP
reactjs
Marie Pelletier
Marie Pelletier

Reputation: 427

ReactJS - Need to click twice to set State and run function

Here is a summary of the code I have inside my React component: 

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
   this.otherFunction();
},
onClick2: function(){
   this.setState({link:"Link2"});
   this.otherFunction();
},
otherFunction:function(){
     //API call to this.state.link
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

The problem I have is that the first time I click the button, the otherFunction will run, but it will not have the updated value of myState. If I click a second time, then it works correctly.

Upvotes: 12

Views: 21744

Answers (3)

Batte Man
Batte Man

Reputation: 63

If all that onClick does is change the state, then you shouldn't have two functions that do the same job. You should have the new value of the "link" state passed as an argument to the function "onClick" :)

Upvotes: 1

Marie Pelletier
Marie Pelletier

Reputation: 427

Well, here I am answering my own question, for future reference. I figured it out. I removed this.otherFunction() from the onClick functions, and put it in componentWillUpdate. So it looks like this: 

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
},
onClick2: function(){
   this.setState({link:"Link2"});
},
otherFunction:function(){
     //API call to this.state.link
},
componentWillUpdate(){
    this.otherFunction();
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

Upvotes: 2

Michael Parker
Michael Parker

Reputation: 12966

From the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

If you want a function to execute after the state transition completes, pass it in as a callback:

onClick1: function() {
   this.setState({link:"Link1"}, this.otherFunction);
},

Upvotes: 12

Related Questions