如何从 API 中解构对象？

在这里，您将不得不进行多个 API 调用，所有这些调用都基于之前的调用。这几乎是async await.

// default start at page #1
async function makeRequest(page = 1) {
    const url = `https://reqres.in/api/users?page=${page}`
    const response = await axios.get(url);

    const { total_pages: totalPages, data } = response.data;

    const isLastPage = totalPages <= page;
    if (isLastPage) {
        return data; // if last page, just return this data
    }

    const next = await makeRequest(page + 1); // make request for next page
    return [...next, ...data] // return both sets of data
}

这是一个处理请求的函数。如果要获取更多页面，它会递归调用 API。

然后我们可以在您的componentDidMount方法中很好地处理它。

componentDidMount() {
  makeRequest()
    .then(repos => this.setState({ repos }))
    .catch(error => console.log(error));
}

=== 编辑 ===

再想一想，我想更新我以前的答案，因为它不可扩展。它在所有请求发出后显示所有用户 - 在 4 页时不明显，但在更多页时会出现问题。

async function makeRequest(page = 1) {
  const url = `https://reqres.in/api/users?page=${page}`;
  const response = await axios.get(url);

  const { total_pages: totalPages, data } = response.data;

  return { totalPages, repos: data };
}

class Repos extends React.Component {
  state = {
    repos: []
  };

  async componentDidMount() {
    this.loadPages();
  }

  async loadPages() {
    const totalPages = await this.loadPage(1); // make first request

    const nextPage = 2;
    for (let i = nextPage; i <= totalPages; i++) { // make every request separately
      this.loadPage(i);
    }
  }

  async loadPage(page = 1) {
    const { totalPages, repos } = await makeRequest(page);
    this.addRepos(repos);

    return totalPages;
  }

  addRepos(repos) {
    this.setState(prevState => ({
      repos: [...repos, ...prevState.repos] // add to array, not override
    }));
  }
....
}

我更新的代码分别发出每个请求并附加到状态（而不是覆盖它）。这意味着它可以独立发出请求并在每个请求完成后立即添加用户。

这确实意味着顺序不一定与 API 匹配，但这可以通过根据需要对状态进行排序来更改。

你可以在这里看到它在 CodePen 上的工作。