我做了我的componentWillMount()异步。现在，我可以用await用setState。
这是示例代码：
componentWillMount = async() => {
const { fetchRooms } = this.props
await this.setState({ })
fetchRooms()
}
所以这里的问题是this.setState返回Promise，因为我可以使用await它？
编辑
当我放置 await 然后它按顺序运行1, 2, 3当我删除 await 然后它运行1, 3, 2??
componentWillMount = async() => {
const { fetchRooms } = this.props
console.log(1)
await this.setState({ } => {
console.log(2)
})
console.log(3)
fetchRooms()
}
您可以Promise，this.setState以便您可以使用 React API 作为Promise。这就是我让它工作的方式：
class LyricsGrid extends Component {
setAsyncState = (newState) =>
new Promise((resolve) => this.setState(newState, resolve));
后来，我this.setAsyncState使用标准的 Promise API 调用：
this.setAsyncState({ lyricsCorpus, matrix, count })
.then(foo1)
.then(foo2)
.catch(err => console.error(err))
setState通常不与Promise一起使用，因为很少有这样的需要。如果在状态更新 ( fetchRooms)之后调用的方法依赖于更新的状态 ( roomId)，它可以以另一种方式访问它，例如作为参数。
setState使用回调并且不返回Promise。由于很少需要这样做，创建一个不使用的Promise会导致开销。
为了返回一个promise，setState可以promisified，如this answer中所建议的。
发布的代码可以使用，await因为它是一个 hack。await ...是 的语法糖Promise.resolve(...).then(...)。await产生一个滴答延迟，允许在状态更新完成后评估下一行，这允许按预期顺序评估代码。这与：
this.setState({ roomId: room && room.roomId ? room.roomId : 0 }, () => {
console.log(2)
})
setTimeout(() => {
console.log(3)
});
无法保证订单在不同条件下会保持不变。此外，第一个setState回调不是检查状态是否更新的合适位置，这就是第二个回调的用途。
setState 不返回Promise。
setState 有一个回调。
this.setState({
...this.state,
key: value,
}, () => {
//finished
});
不要认为setState是返回 aPromise但你总是可以做到这一点
await new Promise( ( resolve ) =>
this.setState( {
data:null,
}, resolve )
)
或者你可以做一些这样的实用功能
const setStateAsync = ( obj, state ) => {
return new Promise( ( resolve ) =>
obj.setState( state , resolve )
)
}
并在 React.Component 中使用它，如下所示：
await setStateAsync(this,{some:'any'})
它不返回Promise。
您可以将await关键字放在任何表达式之前。如果该表达式不计算为Promise，则无效。
setState 接受回调。