如何使用React调用多个页面调用API

Question

我确实有一个API需要获取我的React应用程序。挑战是我有一个示例的API中不存在总页数。另外，每个API呼叫限制一次仅获得1000个记录。我确实有一个应该按页面上的按钮，但是我认为它不应该按照自己的作用，在获取了所有数据后，它仍然会进行API调用。我的问题是：

1. 我如何获取API，因此即使有一个限制，所有5000个记录都将填充

2. 我如何使按钮一次fetch api在一次不会消失的1000个记录中，因为该按钮是故障的，当我单击它，它将获取1000，但消失了。

     const perpage = 1000;
     const [page，setPage] = usestate（[]）;
     const [用户列表，setUserList] = usestate（[]）;
     const [加载，setloading] = usestate（false）;
     const [load，setload] = usestate（[]）;
   
     useeffect（（）=＆gt; {
       const getUserList =（）=＆gt; {
         setloading（true）;
         拿来（
           `/forms？page = $ {page}＆amp; count = $ {perpage}`，
           {标题}
         ）
           然后。
           。然后（（res）=＆gt; {
             //setTotalPages(Res.total_pages）;
             setload（res.elements）;
              setUserList（res.elements）;
               setPage（res.page）;
             if（res.elements.length === 0）{
               console.log（“数组为空”）;
               警报（“空”）;
               setloading（false）;
             }
   
             console.log（res）;
           }）;
       };
       getUserList（）;
     }， [页]）;
   
     返回 （
       ＆lt; div className =“ app”＆gt;
   
         {userList.map（（（x，i）=＆gt; {
           返回 （
             ＆lt; div key = {i} className =“ box”＆gt;
               ＆lt; div className =“ name”＆gt; {x.name + 1}＆lt;/div＆gt;
             ＆lt;/div＆gt;
           ）；
         }）}}
   
       ＆lt; button className =“ btn-load-more” onclick = {（）=＆gt; setPage（page + 1）}＆gt;
         {加载中 ？ “加载...”：“加载更多”}
       ＆lt;/butt＆gt;
   
       ＆lt;/div＆gt;
     ）；
    

     {
       “元素”：[{{
       “ type”：“ landingpage”，
       “ CurrentStatus”：“草稿”，
       “ id”：“ 21”，
       “创建”：“ 1424811452”，
       “创建”：“ 5”，
       “深度”：“最小”，
       “ folderid”：“ 3655”，
       “名称”：“默认着陆页”，
       “权限”：[“检索”，“ setSecurity”，“ delete”，“ update”]，，
       “更新”：“ 1424811452”，
       “更新”：“ 5”，
       “排除Fromauthentication”：“ false”，
       “ htmlcontent”：{
       “ type”：“ structuredhtmlcontent”，
       “ contentsource”：“编辑器”
       }，，
       “相对路径”：“/default_lp”
       }，{
       “ type”：“ landingpage”，
       “ CurrentStatus”：“草稿”，
       “ id”：“ 22”，
       “创建”：“ 1432583568”，
       “创建”：“ 9”，
       “深度”：“最小”，
       “ folderid”：“ 3655”，
       “名称”：“测试着陆页”，
       “权限”：[“检索”，“ setSecurity”，“ delete”，“ update”]，，
       “ UpdatedAt”：“ 1432583653”，
       “更新”：“ 9”，
       “排除Fromauthentication”：“ false”，
       “ htmlcontent”：{
       “ type”：“ rawhtmlcontent”，
       “ contentsource”：“上传”
       }，，
       “相对路径”：“/test_landing_page”
       }]，
       “页面”：1，
       “ pageize”：1000，
       “总计”：5000
       } 
    

`

Answer 1

公平地说，如果您知道API将始终有5个总页面并且不会阻止多个请求，那么我会以下面的方式进行：

export default function SomeComponent(){

   useEffect(() => {
    

    (async () => {
       try {
          let promises = [];

          new Array(5).forEach(page => {
               let promise = new Promise(async (resolve, reject) => {
               try {
                   let response = await fetch('your url');
                   let json = await response.json();
                   if(response.status !== 200) reject("ERR: " + response.status)
                   resolve(json)
               }catch(err){
                   reject(err.message)
               }
            })
            promises.push(promise)
          })

         let results = await Promise.all(promises)
         //here you have all 5000 rows unless a request fails

       }catch(err){
         //handle the error
       }
     
    })()
        
   }, [])


   return (
      //your jsx here
   )
}

Update
我打开了一个沙盒并使用了Randomuser.me，它具有分页的端点，并使其与您的方法一起使用，因此您在setload（）中添加的值可能会出现问题。我唯一要做的是为React 18 UseFect（）double渲染添加一个abortController。在此示例中，我没有下一页号或总数

if(page === total/perPage){
 ...
}

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  let [page, setPage] = useState(1);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    let abortController = new AbortController();
    let { signal } = abortController;
    fetch(`https://randomuser.me/api/?page=${page}&results=10`, {
      signal
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setUsers((prev) => [...prev, ...data.results]);
        if (page < 10) {
          console.log(page);
          setPage(page + 1);
        }
      })
      .catch((err) => {
        if (err.name === "AbortError") {
          setUsers([]);
        }
      });

    return () => {
      abortController.abort();
    };
  }, [page]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}