使用async setState

Question

我有调度动作的功能.我想在动作之前和之后显示一个加载器.我知道组成传递给的对象的反应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 REACT

Answer 2

将其余代码包装在第一个代码的回调中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 })
      })
  })
}