如何使用React呼叫具有多個頁面的API

我確實有一個 API 需要提取到我的反應應用程式中。挑戰在于我有示例的 API 中不存在總頁數。此外，每個 API 呼叫限制一次只能獲取 1000 條記錄。我確實有一個應該逐頁訪問的按鈕，但我認為它沒有按應有的方式作業，在獲取所有資料之后，它仍然會進行 API 呼叫。我的問題是：

1. 如何獲取 API，以便即使有限制也將填充所有 5000 條記錄

2. 如何使按鈕以獲取 API 以一次加載 1000 條記錄而不會消失，因為該按鈕有問題，當我單擊它時，它會獲取 1000 條記錄，但它會消失。

   const perPage = 1000;
     const [page, setPage] = useState([]);
     const [userList, setUserList] = useState([]);
     const [loading, setLoading] = useState(false);
     const [load, setload] = useState([]);
   
     useEffect(() => {
       const getUserList = () => {
         setLoading(true);
         fetch(
           `/forms?page=${page}&count=${perPage}`,
           { headers }
         )
           .then((res) => res.json())
           .then((res) => {
             //setTotalPages(res.total_pages);
             setload(res.elements);
              setUserList(res.elements);
               setPage(res.page);
             if (res.elements.length === 0) {
               console.log("array is empty");
               alert("empty");
               setLoading(false);
             }
   
             console.log(res);
           });
       };
       getUserList();
     }, [page]);
   
     return (
       <div className="App">
   
         {userList.map((x, i) => {
           return (
             <div key={i} className="box">
               <div className="name">{x.name   1} </div>
             </div>
           );
         })}
   
       <button className="btn-load-more" onClick={() => setPage(page   1)}>
         {loading ? "Loading..." : "Load More"}
       </button>
   
       </div>
     );
   

       {
       "elements": [{
       "type": "LandingPage",
       "currentStatus": "Draft",
       "id": "21",
       "createdAt": "1424811452",
       "createdBy": "5",
       "depth": "minimal",
       "folderId": "3655",
       "name": "Default Landing Page",
       "permissions": ["Retrieve", "SetSecurity", "Delete", "Update"],
       "updatedAt": "1424811452",
       "updatedBy": "5",
       "excludeFromAuthentication": "false",
       "htmlContent": {
       "type": "StructuredHtmlContent",
       "contentSource": "editor"
       },
       "relativePath": "/Default_LP"
       }, {
       "type": "LandingPage",
       "currentStatus": "Draft",
       "id": "22",
       "createdAt": "1432583568",
       "createdBy": "9",
       "depth": "minimal",
       "folderId": "3655",
       "name": "Test Landing Page",
       "permissions": ["Retrieve", "SetSecurity", "Delete", "Update"],
       "updatedAt": "1432583653",
       "updatedBy": "9",
       "excludeFromAuthentication": "false",
       "htmlContent": {
       "type": "RawHtmlContent",
       "contentSource": "upload"
       },
       "relativePath": "/Test_Landing_Page"
       }],
       "page": 1,
       "pageSize": 1000,
       "total": 5000
       } 
   

`

uj5u.com熱心網友回復：

公平地說，如果您知道 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
   )
}

更新 我打開了一個沙箱并使用了具有分頁端點的 randomuser.me 并使其與您的方法一起使用，因此您在 setload() 中添加的值可能有問題。我做的唯一額外的事情是為 React 18 useEffect() 雙重渲染添加了一個 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>
  );
}

標籤：反应 api 反应钩子 拿来

上一篇：Linux的基本概念

下一篇：無法通過pythonselenium獲取表資訊