I need to change the state by using a click. This is my code:
var List = React.createClass({
getInitialState : function() {
return {data : [], currentPage : 0} ;
},
componentDidMount : function() {
this.getData() ;
},
getData : function() {
console.log(this.state.cuurrentPage) ;
//this is getting data from the server
},
incrementPage : function() {
this.setState({currentPage : this.state.currentPage + 1}) ;
this.getData() ;
},
return : function() {
<button onClick={this.incrementPage}>More</button>
}
})
but the changes happen only after the first click. After the first click I get the default state "0", but when I do the second click I get changed state "1".
Why is it works so? And how can change the state after the first click?
return: function()..?? It should berender()console.logincomponentDidMount.. Seams like its not called at allsetState()does not immediately mutatethis.statebut creates a pending state transition. Accessingthis.stateafter calling this method can potentially return the existing value.". The state gets updated just fine, but you are reading from the state before it was updated.