在 React 类组件中设置操作之前和之后的加载状态

Question

我有调度一个动作的函数。我想在操作之前和之后显示一个加载器。我知道组成传递给 setState 的对象的反应。问题是如何以异步方式更新属性：

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

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

原文由 Chen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

With this, your load is guaranteed to be set to true before getItemsFromThirtParty is called and the load is set back to false 。

这假设您的 getItemsFromThirtParty 函数是同步的。如果不是，则将其转换为承诺，然后在链接的 then() 方法中调用最终的 setState --- ：

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

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以将 setState 包装在 Promise 中并使用 async/await 如下

setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
}

async handleChange(input) {
    await this.setStateAsync({ load: true });
    this.props.actions.getItemsFromThirtParty(input);
    await this.setStateAsync({ load: false })
}

来源： ASYNC AWAIT 与 REACT

原文由 Tejas Rao 发布，翻译遵循 CC BY-SA 3.0 许可协议