Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reactjs

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.

like image 868
Marie Pelletier Avatar asked Jan 14 '16 22:01

Marie Pelletier


People also ask

Can you set state twice React?

If you have ever tried to set a state variable multiple times in a row in a React component, you may have been surprised to find that it didn't quite work. It would be reasonable to expect that, every time you click the “Increment Twice” button, count will increase by two. But it doesn't!

How do you handle double click in React?

To handle double click events in React:Add an onClick prop to the element. Use the detail property on the event object to get the click count. If the click count is equal to 2, handle the double click event.

How do you avoid multiple clicks on a button in React?

To prevent multiple button clicks in React: Set an onClick prop on the button, passing it a function. When the button gets clicked, set its disabled attribute to true .

How do I change my state on click in React?

We have to set initial state value inside constructor function and set click event handler of the element upon which click, results in changing state. Then pass the function to the click handler and change the state of the component inside the function using setState.


2 Answers

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);
},
like image 159
Michael Parker Avatar answered Oct 01 '22 09:10

Michael Parker


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>
  }
like image 43
Marie Pelletier Avatar answered Oct 01 '22 10:10

Marie Pelletier