使用 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 没有 return 承诺。

所以在这种情况下你不能使用await。您需要使用回调。

Answer 2

如前一个答案所述，setState() 不是 return Promise，因此您不能按预期将其与 await 一起使用。（尽管您也可以 await 同步代码）。

当说setState()是异步时，意思是说setState()的效果可能稍后发生。

此外，虽然在回调函数中读取 this.state 会在执行回调时及时为您提供组件在特定时刻的状态，但 并不完全 正如您所期望的那样，因为 所有回调函数 在一批 setState() 调用被执行后 被调用。 (See this issue)。

Answer 3

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

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

Answer 4

您不能等待 this.setState，原因已述。但是您可以轻松编写自己的可等待 setState 函数：

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

现在可以打电话了

await promisedSetState({ someState: true });

Answer 5

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

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

Answer 6

正如大卫所说，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
}

使用 await setState() 是否正确？

Is it correct to use await setState()?

javascript

setstate

async-await

reactjs