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

Question

我有一个发送 Action 的函数。我想在操作之前和之后显示加载程序。我知道 react 组合传递给 setState 的对象。问题是如何以异步方式更新属性:

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

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

Answer 1

您可以将 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 With REACT