reactjs - 组件渲染过早

Question

我有一个类，它执行大量 API 调用来填充状态，因此我在 componentDidMount() 生命周期 Hook 中执行此操作，如下所示:

 async componentDidMount() {
    await this.populateQuote();
    await this.populateCustomers();
    await this.populateEmployees();
    await this.populatePropertyTypes();
}

每个函数都在获取一些数据并在状态中设置一些值，现在我的问题是，每次 promise 之一解决时，它都会重新呈现我想避免的页面，有什么办法围绕这个？

Answer 1

您应该使用Promise.all来确保在执行操作之前数组中的所有Promises都得到解析

async componentDidMount(){
    const calls = [call1(), call2(), call3()]
    const results = await Promise.all(calls)
    console.log(results[0],results[1],results[2])
}