此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以获取下一页。
处理这个问题的最简单的算法看起来像这样：
1.获取第一个页面，并查看info.next是否有URL。
1.如果有，就把它捡回来。
1.重复此操作，直到页面中有info.next的null。
1.合并所有页面中的results数组。
做好这件事有点复杂，这个算法可以做得更好。如果你还在学习，我会假装只有20个字符，继续构建更多的应用程序。
当你想学习获取整个数据集时，你可以尝试在一个循环中获取。您可能会遇到一些问题，解决每个问题都有不同的难度：

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

由于这是一件常见的事情，因此有一个名为React Query, which provides a hook for fetching paginated data like this的库。它解决了很多这样的问题，但如果你还不习惯使用React，它并不是完全简单的。

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

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);
    }
  };

字符串