React setState和Promise中的竞争条件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (7)

在我的上下文中,我有一个LocalFunction返回一个承诺。

LocalFunction: () => Promise<void>

LocalFunction: () => {
    return externalCall.getBooks().then((books) => {
        this.setState({ Books: books })
    })
}

我可以根据BooksContext状态中的更新对象在另一个组件中调用此函数,如:

this.props.LocalFunction().then(() => {
    // do something with this.props.Context.Books
})

但我知道React会分批更新状态。因此,当调用LocalFunction而没有Books使用新书更新状态时,我是否会遇到竞争状态?

我知道一种避免它的方法是将LocalFunction包装在一个新的Promise中并解决它this.setState({ Books: books }, resolve),但我想避免这样做,如果可能的话。

提问于
用户回答回答于

如何使用async / await?

LocalFunction: async (needUpdate = false) => {
    const result = await externalCall.getBooks();
    if(needUpdate){
        this.setState({ Books: result })
    }
    return result;
}
this.props.LocalFunction().then((res) => {
    console.log(res)
    // do something with this.props.Context.Books
})

当您需要更新状态

LocalFunction(true)

扫码关注云+社区

领取腾讯云代金券