在 REACT 中跨多个页面显示来自 API 的所有字符答案

【问题标题】：Display all characters from API across multiple pages in REACT在 REACT 中跨多个页面显示来自 API 的所有字符
【发布时间】：2021-08-05 01:12:56
【问题描述】：

我是一个编程初学者，我正在尝试使用此 API 构建一个显示所有 Rick and Morty 角色的 React 应用：

https://rickandmortyapi.com/api/character?page=${pages}

使用 fetch，我只能获取前 20 个字符。这是我的代码：

    fetch("https://rickandmortyapi.com/api/character")
      .then((res) => res.json())
      .then((data) => setCharacters(data.results));
  }, []);

我尝试使用 axios，但它不会出现在我的 package.json 中。

我还真的很想制作映射角色的函数并构建按物种和性别过滤它们的按钮。

const [characters, setCharacters] = useState([]);
  return (
    <div>
      {character.filter(character => character.gender = "Male").map(filteredCharacter => (
        <li>
          {filteredCharacter.gender}
        </li>
      ))}
    </div>
  );
}

export default App;

我遇到了很多错误。帮帮我？

【问题讨论】：

标签： reactjs api axios fetch

【解决方案1】：

此 API 返回分页数据，这意味着它只会返回部分结果，并且您必须多次请求才能获取整个数据集。每个请求返回一页数据。

在获取该 URL 后，我使用 console.log(data) 来查看对象的样子，我看到了如下内容：

{
 info: {
   count: 671,
   pages: 34,
   next: "https://rickandmortyapi.com/api/character?page=2",
   prev: null
 },
 results: [
   { id: 1, name: "Rick Sanchez", ... },
   { id: 2, name: "Morty Smith", ... },
   ...
 ]
}

这就是说总共有 671 个字符，有 34 页。它还为您提供了获取下一页的 URL。

处理此问题的最简单算法如下所示：

获取首页，查看info.next是否有网址。
如果有，则获取它。
重复直到页面有null 对应info.next。
合并所有页面中的results 数组。

做好这个有点复杂，这个算法可以做得更好。如果你还在学习，我会假装只有 20 个字符，然后继续构建更多的应用程序。

当您确实想学习获取整个数据集时，可以尝试循环获取。您可能会遇到一些问题，解决每个问题都有不同的难度：

在完成所有 34 个请求之前，UI 可能不会显示任何内容
UI 可能会在获取数据页面时显示它们，但页面会跳来跳去。
如果您在应用中多次使用该组件，您可能会在每次使用该组件时发出 34 次请求。
如果您刷新页面，您可能会再次发出所有 34 个请求。
获取数据后，您可能需要刷新它，因为您知道某个角色的传记已更新。

由于这是一种常见的做法，因此有一个名为 React Query, which provides a hook for fetching paginated data like this 的库。它解决了很多这样的问题，但如果您对 React 还不太熟悉，那么使用起来也不是很简单。

【讨论】：

谢谢你的回答，现在我知道了分页，你给了我两个新的想法来尝试和获取。

【解决方案2】：

获取所有数据，然后将其添加到您的状态：

const [characters, setCharacters] = useState([]);
  useEffect(() => {
    fetchData("https://rickandmortyapi.com/api/character");
  }, []);

  const fetchData = async (url) => {
    const res = await fetch(url);
    const data = await res.json();
    setCharacters((_characters) => {
      return [..._characters, ...data.results];
    });
    if (data.info && data.info.next) {
      fetchData(data.info.next);
    }
  };

【讨论】：