使用异步setState

小编典典

使用异步setState

reactjs

我有调度动作的功能。我想在操作之前和之后显示一个加载程序。我知道将对象传递给时会做出反应setState。问题是如何以异步方式更新属性：

handleChange(input) {
    this.setState({ load: true })
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
}

基本上，如果我将此属性作为应用程序状态的一部分（使用Redux），那么一切都很好，但是我真的更喜欢将此属性仅带到组件状态。

阅读 237

2020-07-22

共1个答案

小编典典

将其余代码包装在第一个的回调中setState：

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
    this.setState({ load: false })
  })
}

有了这个，你load可以保证被设定为true之前getItemsFromThirtParty被调用，并且load被设置回false。

这假设您的getItemsFromThirtParty功能是同步的。如果不是，则将其变为promise，然后setState在链接then()方法中调用final
：

handleChange(input) {
  this.setState({
    load: true
  }, () => {
    this.props.actions.getItemsFromThirtParty(input)
      .then(() => {
        this.setState({ load: false })
      })
  })
}

2020-07-22