异步等待是否适用于 React setState 方法？

Question

有人可以帮助澄清在 React setState 方法中使用 async/await 吗？我认为它只适用于 Promises。我找不到任何合适的文档。请有人帮忙！

我的应用中有这样的东西，而且它往往可以工作：

aync setNewName {
  this.setState({ name: "boo" });
  console.log(this.state); //prints most recent state - {name: 'boo'}
};

为什么有效？它是否有效，因为在这种情况下，状态会在执行控制台语句之前快速更新？是否保证其他情况下同步执行？

Answer 1

这个：

澄清 React setState 方法中 async/await 的使用

在提供的代码中，async 只是将调用封装到setState()。

这个：

我认为它只适用于 Promises。

假设“它”表示async/await，那么这是真的。您没有意识到 setState() 函数被包装在 Promise 中，而不是像 Promise 那样表现。

这个：

我的应用中有这样的东西，而且它往往可以工作：

该代码将始终工作。为什么？因为它只是同步执行。函数调用会产生一个 Promised 对象，因为它被声明为async。

这个：

它是否有效，因为在这种情况下，状态之前更新得很快 执行控制台语句？

[EDIT]不，这与状态何时更新无关。 很可能是这样，是的。此代码不会“等待setState() 完成，但在这种情况下它会立即完成。

它的工作方式是：

1. 创建承诺
2. 执行setState()
   • 立即返回since it has not return statement
   • React 继续异步更新状态 - 将在未来完成
3. 执行console.log()
4. 立即解决 Promise（因为没有异步操作

这个：

是否保证在其他情况下同步执行？

没有。

Answer 2

Java 脚本将在bit 开始执行异步代码之前执行所有同步代码。第一个控制台日志是同步的，所以它被执行了。然后执行 setState。由于 setState 是异步的，您可以将其视为在实际设置状态时解决的承诺。 await 回调将在状态设置后执行。您可以将其视为已解决的承诺。