如何确保更新reactjs状态,然后调用函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (135)

我正在尝试使用reactjs来更新状态,一旦更新,就会激活一个请求新页面的ajax调用。就在ajax调用触发之前设置了一个偏移量变量:var offset = this.state.npp * this.state.page;但是我发现clickNextPage()被触发后,this.state.page的值不会更新。

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

如何确保更新my.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
提问于
用户回答回答于

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 这使您有机会在设置新状态并且组件重新自我渲染后运行任何代码
用户回答回答于

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

这是因为React可能批量处理您的状态更新,因此无法保证this.setState同步。

您想要做的是this.findByName()在内部调用componentDidUpdatecomponentWillUpdate或通过作为第二个参数提供的回调来调用,this.setState具体取决于您的用例。请注意,this.setState在您的调用通过并且组件已重新呈现之后,才会触发回调。

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

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

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励