如何在react中使用axios从API中获取所有页面数据

dgsult0t 于 2023-11-18 发布在 iOS

关注(0)|答案(1)|浏览(146)

我试图从一个API获取数据，API返回多页第一页有10个对象，其余的数据在接下来的页面。现在，当我做一个正常的axios API请求它只给我第一页的前10个数据，我怎么能一次从所有页面获取所有数据。
这就是我所尝试的。

import React from "react";
import { useState, useEffect } from "react";
import { getJobs } from "../service/jobs";

const MyTable = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    getJobs()
      .then(function (response) {
        setData(response.data.data.data);
        console.log(response)
      })
      .catch((e) => {
        console.log("Jobs error", e);
      });
  }, []);

 

  useEffect(() => {
    console.log(data);
  }, [data]);

  return (
    <div>
      {data &&
        data.map((d, key) => (
          <div key={key} className="d-flex">
            <h1>{d.id}</h1>
            <h1>{d.job_title}</h1>
            
          </div>
        ))}
    </div>
  );
};

export default MyTable;

字符串
这是API响应

data: 
current_page: 1
data: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first_page_url: "http://api/api/v1/jobs?page=1"
from: 1
last_page: 2
last_page_url: "http://api/api/v1/jobs?page=2"
links: (4) [{…}, {…}, {…}, {…}]
next_page_url: "http://api/api/v1/jobs?page=2"
path: "http://api/api/v1/jobs"
per_page: 10
prev_page_url: null
to: 10
total: 13

型
getjobs（）函数代码

export function getJobs() {
  return axiosClient.get("/jobs");
}

型
axiosClient

const axiosClient = axios.create({
    baseURL: api_url_v1,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`,
    }
  });

型

axios

来源：https://stackoverflow.com/questions/77376520/how-to-get-data-from-all-pages-from-api-using-axios-in-react

1条答案

按热度按时间

hkmswyz61#

这段代码将是一个相当粗略的过程大纲，而不是你可以期望的东西，只是复制/粘贴，并有它的工作没有修改...
如果你想获取多个记录的“页面”*，并且不知道有多少页面 *，那么你需要模仿循环的效果，但是使用React组件重新呈现。主要的状态元素是：
1.您正在生成的项的列表。
1.显示“下一页”。
这个过程本质上是使用useEffect在每次呈现时获取“下一页”，依赖于上面的第二个数据元素来知道是否这样做。
例如，考虑这种状态：

const [data, setData] = useState([]);
const [nextPage, setNextPage] = useState('http://api/api/v1/jobs?page=1');

字符串
然后，您可以创建一个useEffect，它将nextPage作为依赖项，在这种情况下，您将获取nextPage，将其内容添加到data，并在服务器指示有另一页数据时更新nextPage。
重要的是，这些更新应该只发生 * 有条件 * 在该效果，所以它最终停止时，最后一个“页面”已经达到。例如：

useEffect(() => {
  // Only fetch if nextPage is not null
  if (nextPage) {
    axiosClient.get(nextPage)
      .then(response => {
        // add the response to the data state
        setData(prev => [...prev, ...response.data.data.data]);

        // update the nextPage state
        // (I'm guessing on the property, check your data structure)
        setNextPage(response.data.next_page_url);
      })
      .catch((e) => {
        console.log("Jobs error", e);
      });
  }
}, [nextPage]);

型
一旦你有了基本的结构，你就可以随心所欲地重构了。例如，如果你想把axios操作提取到它自己的函数中，就像你已经做的那样，你只需要给那个函数传递一个指示“下一页”的值，这样你就可以更新在那个函数中获取的URL。

赞(0）回复(0）举报 2023-11-18

我来回答

如何在react中使用axios从API中获取所有页面数据

1条答案

相关问题

热门标签

最新问答