如何确保更新reactjs状态，然后调用函数？

我正在尝试使用reactjs更新状态，一旦更新，就会触发一个ajax调用，请求一个新页面。在ajax调用激发之前，设置了一个偏移量变量：

var offset=this.state.npp*this.state.page但是我发现在触发clickNextPage（）后，this.state.page的值没有更新

我根本不明白这里发生了什么，这似乎是一个竞争条件，因为我用{this.state.page}观察render（）函数的状态变化

如何确保更新我的this.state.page，然后启动findByName（）？

  clickNextPage: function(event){
    console.log("clicked happend")
    page = this.state.page;
    console.log(page)
    page += 1
    console.log(page)
    this.setState({page: page});
    console.log(this.state.page)
    this.findByName()
  },

JS控制台：

clicked happend
0
1
0

调用
this.setState
时，不会直接设置新状态，React会将其置于挂起状态，通过调用
this.state
可以返回旧状态

这是因为React可能会批量更新您的状态，因此不能保证
This.setState
是同步的

您要做的是在
componentdiddupdate
中调用
this.findByName（）
，
componentWillUpdate
或通过作为
this.setState
的第二个参数提供的回调，具体取决于您的用例。请注意，
this.setState
的回调只有在调用通过并且组件重新呈现自身之后才会触发

此外，在您的例子中，您可以传递函数do
this.setState
，而不是执行变量舞蹈来增加可读性

this.setState(function (prevState, currentProps) {
    return {page: prevState.page + 1}
}, this.findByName);

setState
是异步的，因为
此状态将不会立即更新。对于您的困境，简短的回答是使用回调（setState的第二个参数
setState
），它是在内部状态更新后调用的。比如说

this.setState({page: page}, function stateUpdateComplete() {
    console.log(this.state.page)
    this.findByName();
}.bind(this));

较长的答案是，在调用
setState
后，将调用三个函数（有关每个函数的详细信息，请参见此处）：


shouldComponentUpdate
这允许您检查以前和新的状态，以确定组件是否应该自我更新。如果返回false，则不会执行以下函数（尽管组件中的
this.state
仍将更新）
componentWillUpdate
这使您有机会在内部设置新状态并进行渲染之前运行任何代码
render
这发生在组件“will”和“did”函数之间
componentdiddupdate
这使您有机会在设置新状态并重新呈现组件本身后运行任何代码
使用无名函数，此代码可以用较短的格式编写

myReactClassFunction = (param) => {
  this.setState({
    key: value,
  },
  () => this.myClassFunction());
}

你在这里写的代码和真实代码有多接近？您没有任何异步调用在更新之前可能会更改
state.page
？