Question

我需要在调用render函数之前获取数据。我在state = { myData: [] }; componentDidMount() { var result = []; getAllData().then((valuesReturnedByAPI) => { valuesReturnedByAPI.forEach(element => { getSpecificData(element.key).then((status) => { result.push({ name: element.name, status: status }); }); }); }).then(() => { // I would like to set the state only once when all data has been pushed into result this.setState({ myData: result }); }); }中执行此操作。在这里我调用一个函数，它返回在另一个函数调用中使用的数据。我该如何等待这些数据？

https://mywebsite.com/p/foo-bar-fizz-buzz-myid1234

Answer 1

您需要使用Promise.all等待所有内部请求完成。

componentDidMount() {
getAllData().then((valuesReturnedByAPI) => {
  return Promise.all(valuesReturnedByAPI.map(element => {
    return getSpecificData(element.key).then((status) => {
      return {
        name: element.name,
        status
      };                    
    });
  }));            
}).then((myData) => {
  // I would like to set the state only once when all data has been pushed into result
  this.setState({            
    myData
  });        
});
}

带隐式返回的格式化版本

componentDidMount() {
    getAllData()
      .then(valuesReturnedByAPI =>
        Promise.all(
          valuesReturnedByAPI.map(element =>
            getSpecificData(element.key).then(status => ({
              name: element.name,
              status
            }))
          )
        )
      )
      .then(myData => this.setState({ myData }));
  }

在渲染之前调用几个相关函数

1 个答案: