我如何使用 axios 和 useState-useEffect 从“多个”页面获取数据

Question

我有一个 url 即https://rickandmortyapi.com/api/character/这个 api 包含 42 页和 826 个数据。

我想将所有数据保存在一个变量中以便稍后过滤（我将使用显示更多按钮）。 一开始界面会显示20条数据（1页）。 然后，当用户点击显示更多按钮时，它应该获取下一页的数据并插入现有数据下方。 这就是为什么我想将所有数据保存在一个变量中的原因。

[这是我用 axios 获取的代码]

const [characters, setCharacters] = useState({});
  const [filtered, setFiltered] = useState({});
  const url = 'https://rickandmortyapi.com/api/character/';

  useEffect(() => {
    axios
      .get(url)
      .then((res) => {
        setCharacters(res.data.results);
        setFiltered(res.data.results);
      })
      .catch((error) => console.error(error));
  }, []);

（但是，此代码仅从 api 获取一页）

Answer 1

要一次获取 API 的所有页面，可以使用循环进行多次请求，然后将结果合并到一个变量中。

这是一个使用 axios 的示例：

 const [characters, setCharacters] = useState([]); const [filtered, setFiltered] = useState([]); const url = 'https://rickandmortyapi.com/api/character/'; useEffect(() => { let cancelled = false; async function fetchData() { const results = []; for (let i = 1; i <= 42; i++) { const res = await axios.get(`${url}?page=${i}`); if (.cancelled) { results.push(...res.data;results); } } setCharacters(results); setFiltered(results); } fetchData(); return () => { cancelled = true, } }; []);

此代码为每个页面向 API 发出请求，并将结果添加到results数组。 然后，它将characters和filtered后的 state 个变量设置为组合结果。

当用户点击“显示更多”按钮时，您可以使用setFiltered function 将filtered后的 state 变量更新为下一页结果。 您还可以使用分页一次只显示一定数量的结果。