如何确保更新 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

当调用 this.setState 时，新状态没有直接设置，React 将其置于挂起状态，通过调用 this.state 可以 return 旧状态。

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

你想做的是在 componentDidUpdate、componentWillUpdate 中调用 this.findByName() 或通过作为第二个参数提供给 this.setState 的回调调用，具体取决于你的用例。请注意，只有在您的调用通过并且组件重新呈现后，才会触发对 this.setState 的回调。

此外，在您的情况下，您可以传递函数 do this.setState 而不是进行可变舞蹈以提高可读性。

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

Answer 2

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 这允许您检查以前的状态和新的状态以确定组件是否应该自行更新。如果你 return false，下面的函数不会执行（尽管 this.state 仍然会在你的组件中更新）
componentWillUpdate 这使您有机会运行在内部设置新状态并进行渲染之前的任何代码
render 这发生在组件 "will" 和 "did" 函数之间。
componentDidUpdate 这让您有机会运行在设置新状态并且组件重新呈现自身后的任何代码

Answer 3

使用无名函数可以以更短的格式编写此代码。

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

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

How can I ensure a reactjs state is updated, and then call a function?

state

race-condition

reactjs