使用 await setState() 是否正确?

Question

我的函数看起来像这样：

this.setState(prevState => ({
time : prevState.time + 1
}), function() {
doSomethingWithNewState(this.state.time)
})

在这种情况下使用 await 是否正确？像这样：

await this.setState(prevState => ({
time : prevState.time + 1
}));
doSomethingWithNewState(this.state.time);

Answer 1

由于已经说明的原因，您不能等待this.setState。但是你可以很容易地编写自己的可等待的 setState 函数：

promisedSetState = (newState) => new Promise(resolve => this.setState(newState, resolve));

现在你可以打电话

await promisedSetState({ someState: true });

Answer 2

Nothis.setState不返回承诺。

因此，在这种情况下不能使用 await。您需要使用回调。

Answer 3

正如前面的答案所提到的，setState()不会返回 Promise，因此您不能按照预期将其与await一起使用。(尽管您也可以await同步代码(。

当说setState()是异步的时，这意味着setState()的影响可能会在以后发生。

此外，虽然在回调函数中读取this.state会给你组件在执行回调的特定时刻的状态，但这并不完全是你所期望的，因为所有回调函数都是在执行一批setState()调用后调用的。(请参阅此问题(。

Answer 4

绝对不是。您可以像这样将回调传递给setState：

this.setState(prevState => ({
time : prevState.time + 1
}), 
() => doSomethingWithNewState(this.state.time));

Answer 5

正如David所说，promisedSetState函数效果很好。

要记住的一件事是，如果要在函数中解构状态，请不要使用解构状态，因为它是一个常量并且不会更改。

myFunction = () => {
const { someState } = this.state;
await promisedSetState({someState: someValue });
console.log(someState) <<<--- will be old value
console.log(this.state.someState) <<<--- will be new value
}

Answer 6

setState接受回调？不确定为什么第一个示例会是一个问题

https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296