Javascript React组件方法返回空数组

对于我正在进行的一个项目，我编写了两个react方法，用于从RESTAPI请求和解析数据。然而，应该保存解析数据的数组总是返回空的。我不知道为什么这种情况一直发生。感谢您的帮助

获取和分析数据的React方法：

getData(){
    const { url, queries } = this.state;
    let data_arr = [];

    for (let q = 0; q < queries.length; ++q){
        let query = queries[q],
        post_query = {
            full_name: query.name,
            date_start: query.startdate,
            date_end: query.enddate
        };

        axios.post(url, post_query).then((response) => data_arr.push(response.data));
    }

    return this.setState({data: data_arr});
}
parseData(){
    const { data } = this.state;
    let dataParsed = [];

    for (let d = 0; d < data.length; ++d){
        const provider_entries = data[d];
        let provider_table = {
            name: provider_entries[0].full_name,
            size: 6,
            table: {
                rows: [],
                columns: [
                    {key: 'Date', type: 'date', filterable: true, sortable: true},
                    {key: 'Charges', type:'number', filterable:true, sortable: true},
                    {key: 'Payments', type: 'number', filterable: true, sortable: true},
                    {key: 'Appointments'}
                ]
            }
        };

        for (let p = 0; p < provider_entries.length; ++p){
            const provider_row = provider_entries[p],
            id_val = p++;
            let row = {
                id: id_val,
                Date: provider_row.date,
                Medical: provider_row.charges.medical,
                Cosmetic: provider_row.charges.cosmetic,
                Total: provider_row.charges.total,
                Payments: provider_row.payments,
                Appointments: provider_row.appointments
            };

            provider_table.table.rows.push(row);
        }

        dataParsed.push(provider_table);
    }

    return this.setState({ data_formatted: dataParsed });

}
componentDidMount(){
    this.datafetch = setInterval(() => {
        this.getData();
        this.parseData();

        const { data, data_formatted } = this.state;

        console.log(data, data_formatted);
    }, 5000);
}

---

您所遇到的问题是，您正在进行异步的ajax调用，并在调用之后立即设置状态。工作流程是：使用axios进行api调用，将其链接到一个。然后在数据返回后执行的函数，然后将数据推送到数组中。实际的javascript工作流是这样的：您进行ajax调用，而不是等待响应返回javascript继续执行并运行setstate函数。在运行setState函数时，数据数组仍然为空，因为没有返回响应

如果是我，我会考虑使用axios.all，它需要一系列ajax调用，您可以将一个函数链接到该函数，并在所有api调用完成后运行该函数。此时，您可以将所有数据推入数据数组，并在该数组中设置state。然后阻塞。这将确保在数据实际返回后状态得到更新

如果您查看本文，它将解释如何一次执行多个api调用

像下面这样的东西应该可以工作，我没有机会测试，所以我会再次检查它，但它应该符合我所说的

getData(){
    const { url, queries } = this.state;
    let data_arr = [];

    // map over queries, create array of axios promises
    const axiosQueries = queries.map(function(query) {
      let post_query = {
          full_name: query.name,
          date_start: query.startdate,
          date_end: query.enddate
      };
      return axios.post(url, post_query)
    });
  // set self to be equal to react component 
  var self = this; 

  // chain all axios promises and then give the results back as an array containing each request
   axios.all(axiosQueries).then(function(results){

   // go through each result and push it into data array
     results.forEach(function(response) {
       data_arr.push(response.data)
     })

     // once all data is processed set state to data array.
     return self.setState({data: data_arr});

   })

}

---

关于这一点，我的一个问题是如何处理

axios.spread

中的参数？方法接收的查询量是动态的。如何动态更改axios的

spread

方法的参数？因此，当您确切知道正在进行的调用时，应该使用

axios.spread

。如果你看一下我自己发布的代码，我只做

。然后（函数（结果）

而不是

axios。扩散
，这样做将使结果成为每个承诺的返回值数组。太棒了！我继续并将其添加到了答案中，如果你使用es6，你也可以只做
axios.all（axiosQueries）。然后（（结果）=>{
并且箭头函数将
此
绑定到react组件。
getData(){
    const { url, queries } = this.state;
    let data_arr = [];

    // map over queries, create array of axios promises
    const axiosQueries = queries.map(function(query) {
      let post_query = {
          full_name: query.name,
          date_start: query.startdate,
          date_end: query.enddate
      };
      return axios.post(url, post_query)
    });
  // set self to be equal to react component 
  var self = this; 

  // chain all axios promises and then give the results back as an array containing each request
   axios.all(axiosQueries).then(function(results){

   // go through each result and push it into data array
     results.forEach(function(response) {
       data_arr.push(response.data)
     })

     // once all data is processed set state to data array.
     return self.setState({data: data_arr});

   })

}