我尽力简化和补充 Davin 的答案，以便您可以更好地了解这里实际发生的情况：

1. await放置在this.handleChange 之前，这将安排changeAndValidate函数的其余部分的执行仅在await 解析其右侧指定的值时运行，在这种情况下是this.handleChange返回的值

2. this.handleChange，在await的右边，执行：

   2.1. setState运行它的更新程序，但是因为setState不保证立即更新，它可能会安排更新在以后发生（无论是立即更新还是稍后时间点都没有关系，重要的是它已被调度）

   2.2. console.log('同步代码') 运行...

   2.3. this.handleChange然后退出返回undefined （返回 undefined 因为函数返回 undefined 除非明确指定）

3. await然后接受这个undefined并且因为它不是一个Promise，所以它使用Promise.resolve(undefined)将它转换成一个已解决的Promise并等待它 - 它不是立即可用的，因为在幕后它被传递给它的异步方法.then：

“在 JavaScript 事件循环的当前运行完成之前，永远不会调用传递给Promise的回调”

3.1. 这意味着undefined将被放置到事件队列的后面，（这意味着它现在在事件队列中我们的 setState 更新程序后面......）

4. 事件循环最终到达并获取我们的setState更新，它现在执行...

5. 事件循环到达并拾取undefined，其计算结果为undefined （我们可以根据需要存储它，因此通常在 await 前面使用 = 来存储解析结果）

   5.1. Promise.resolve()现在完成了，这意味着await不再起作用，所以函数的其余部分可以恢复

6. 您的验证代码运行

我还没有测试过这个，但这是我认为正在发生的事情：

在undefined通过返回await后排队setState回调。Theawait正在做一个Promise.resolveunder（在regenerator-runtime），这反过来又将控制权交给事件循环中的下一个项目。

因此，setState回调恰好排在await.

您可以通过将 setTimeout(f => f, 0) 放在setState.

regenerator-runtimeinbabel本质上是一个Promise.resolve用于产生控制的循环。你可以看到_asyncToGenerator的内部，它有一个Promise.resolve.

setState()并不总是立即更新组件文档

但这里可能就是这种情况。

如果你想用Promise替换回调，你可以自己实现：

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

handleChange = (e) => {
  return this.setStateAsync({[e.target.name]: e.target.value})
}

参考：https : //medium.com/front-end-hacking/async-await-with-react-lifecycle-methods-802e7760d802

rvawait的or 返回值定义为：

rv
Returns the fulfilled value of the promise, or the value itself if it's not a Promise.

因此，由于 handleChange 不是异步或Promise值，它只是返回自然值（在这种情况下，没有返回，所以undefined）。因此，这里没有异步事件循环触发器来“让它知道 handleChange 已完成”，它只是按照您提供的顺序运行。