如果你可以使用 async/await 来让 React 的 setState 同步呢？答案

【问题标题】：What if you can use async/await to make React's setState synchronous如果你可以使用 async/await 来让 React 的 setState 同步呢？
【发布时间】：2019-04-04 11:06:23
【问题描述】：

由于 React 的 setState 函数是异步的，因此您无法在调用 this.setState 的同一函数中访问新更新的状态，在 setState 上使用 async/await 的优缺点是什么，例如 await this.setState({ newState });

【问题讨论】：

如果你真的想要，你可以用一个 promise 来包装你的 setstate.. 并在 setstate 完成时解决。这将是你可以使用 async await on :)
@JohnRuddell，你不需要将它包装成一个 Promise 并使用 await，因为它已经提供了一个回调来在 setState 完成时采取行动

标签： reactjs

【解决方案1】：

没有优点，因为this.setState 没有返回承诺，而awaiting 它没有很好的用途。

为了和await一起使用它应该被promisified：

const setStateAsync = updater => new Promise(resolve => this.setState(updater, resolve))

由于通常如何使用setState，因此通常不会使用太多。如果需要依赖之前设置的状态，可以使用更新函数。

【讨论】：

这里是一个使用相同想法的沙盒codesandbox.io/s/4wxoyrpknw

【解决方案2】：

await 关键字需要用于返回 Promise 的表达式，虽然 setState 是异步的，但它不会返回 Promise，因此 await 无法使用它。 setState 提供一个callback 来跟踪它是否已完成。

你会像这样使用回调

this.setState({
   newState
}, () => {
    console.log(this.state.newState)
})

Here is a demo 这表明 setState 不适用于 async await

【讨论】：

如果你正确地承诺状态然后等待它，它就会起作用。 codesandbox.io/s/4wxoyrpknw
@nrgwsth 我知道如果你承诺这个动作它会起作用，但你不需要这样做，因为它已经提供了一个回调并将它包装到一个承诺中，这样你就可以使用等待没有意义。它也会在您的应用程序中引入可能的并发症。 setState 回调以及其他生命周期方法往往可以解决大部分问题