如何在 React 中处理异步 axios 调用中的分页

Question

我对 React 的使用很生疏，我正在尝试为朋友免费构建一个客户端应用程序来轮询 OpenFEC API，它可以让你选择一个“委员会”，然后允许你列出所有与该委员会有关的附表 A 表格中的捐助者。我在管理 receipts 端点上的分页时遇到了麻烦，它一次可以在 Schedule A 中提供 20 个捐赠者。

当您第一次点击端点（即

pagination

）时，收据端点构建的对象同时具有一个

results

对象和一个

https://api.open.fec.gov/v1/schedules/schedule_a/?api_key=${API_KEY}&committee_id=${committeeID}

对象。在

pagination

对象中，有一个

pages

的键，它告诉您总页数。

我失败的地方是如何循环浏览所有页面，然后构建一个

donors

对象，然后我可以转换并最终导出到 CSV 文件中。

我想我在 React

useState

API 和我用来处理分页的异步代码之间遇到了冲突：

async function getDonorPage(page) {
    try {
      const response = await axios.get('https://api.open.fec.gov/v1/schedules/schedule_a/', {
        params: {
          api_key: API_KEY,
          committee_id: committeeID,
          page: page,
        }
      } );
      return response.data.results;
    } catch (error) {
      console.error(error);
    }
  }

  async function getDonors() {
    axios.get('https://api.open.fec.gov/v1/schedules/schedule_a/?', {
    params: {
      api_key: API_KEY,
      committee_id: committeeID,
      per_page: 20
    }}).then(async response => {
        const totalPages = response.data.pagination.pages;
        const newDonorsList = response.data.results;
        for (let i = 0; i < totalPages; i++) {
          let newDonors
          newDonors = await getDonorPage(i);
          for (let donor in newDonors) {
            newDonorsList.push(newDonors[donor])
          }
        }
        return newDonorsList;
      })
      .catch(error => {
        console.error(error);
      });
  }

  async function handleCommitteeSubmit(event) {
    event.preventDefault();
    const finalDonorsList = await getDonors()
    setDonors(finalDonorsList);
    console.log(donors);
  }

现在这个

console.log

返回空列表；我该如何构建我的代码，以便它捕获所有异步调用的结果？