在 ES8 的 async/await 中包装 React 的 setState 函数答案

【问题标题】：Wrapping React's setState function in ES8's async/await在 ES8 的 async/await 中包装 React 的 setState 函数
【发布时间】：2017-08-27 07:03:10
【问题描述】：

由于 React 的 setState 是异步的，是否建议将其调用包装在 async/await 函数中，以便之后严重依赖状态变量的任何内容始终获得更新的值？

【问题讨论】：

setState 为您提供了一个回调，您可以使用它来根据当前状态进行更改。看到这个stackoverflow.com/questions/42038590/…

标签： javascript reactjs

【解决方案1】：

这将是 async/await 的一种可能实现。例如，在您的反应组件内部：

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

async setStateAndDoSomethingRightAfter(state) {
    await this.setStateAsync({state})
    // now do something after
}

但我不确定它是否值得推荐。有生命周期方法是有原因的。

我相信“反应”的做事方式是将依赖于新状态的代码放在 componentDidMount / componentWillUpdate / componentDidUpdate 内。

【讨论】：

我们可以直接使用await this.setState({state})。无需创建像 setStateAsync 这样的包装函数！

【解决方案2】：

你可以使用setState的第二个参数，一个回调。 DOCS.
this.setState({ key: val }, callBack)

【讨论】：