Question

我有一个类，它执行很多API调用来填充状态，所以我在componentDidMount()生命周期挂钩中这样做，就像这样：

 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])
}

Answer 2

使用Promise.all()提取所有数据，然后使用this.setState()执行唯一的重新渲染

async componentDidMount() {
  const [quote, customers, employees, propertyTypes] = await Promise.all([
    this.populateQuote(),
    this.populateCustomers(),
    this.populateEmployees(),
    this.populatePropertyTypes()
  ]);

  this.setState({
    quote, 
    customers, 
    employees, 
    propertyTypes
  });
}

Answer 3

您可以使用Promise.all来发起异步调用的并行请求。

async componentDidMount() {
    const [quotes, customers, employees, propertyTypes] = await Promise.all([
        this.getQuotes(),
        this.getCustomers(),
        this.getEmployees(),
        this.getPropertyTypes()
    ]);
}

然后您将根据结果设置相应的状态。仅当您的调用与其他异步结果无关时（如果next依赖于上一个，您必须等待每个函数并将其从上一次调用传递给它所需的结果），才能实现此目的。

答案最重要的是，在获取所有必需结果之前，您不应调用setState，因为每次调用setState都会启动新的渲染。

组件渲染为时过早

3 个答案: