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

Question

我正在尝试使用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

Answer 1

setState 是异步的，因为 this.state 不会立即更新。解决您的困境的简短答案是使用回调(setState 的第二个参数)，该回调在内部状态更新后调用。例如

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

更长的答案是，在调用 setState 后，将调用三个函数(有关每个 https://facebook.github.io/react/docs/component-specs.html 的更多详细信息，请参阅此处):

• shouldComponentUpdate 这允许您检查以前的状态和新的状态，以确定组件是否应该更新自身。如果返回 false，则不会执行以下函数(尽管 this.state 仍会在组件内更新)
• componentWillUpdate 这使您有机会在内部设置新状态并进行渲染之前运行任何代码
• render 这发生在组件“will”和“did”函数之间。
• componentDidUpdate 这使您有机会在设置新状态并且组件重新渲染自身后运行任何代码