reactjs - React setState 和 Promise 中的竞争条件

Question

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

LocalFunction: () => Promise<void>

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

Books我可以根据上下文状态中的更新对象在另一个组件中调用此函数，例如：

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

但我知道 React 会批量更新状态。Books那么在没有用新书更新状态的情况下调用 LocalFunction 时我会遇到竞争情况吗？

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

标签： reactjs

Answer 1

如何使用 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)