我试图从一个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}`,
}
});
型
1条答案
按热度按时间hkmswyz61#
这段代码将是一个相当粗略的过程大纲,而不是你可以期望的东西,只是复制/粘贴,并有它的工作没有修改...
如果你想获取多个记录的“页面”*,并且不知道有多少页面 *,那么你需要模仿循环的效果,但是使用React组件重新呈现。主要的状态元素是:
1.您正在生成的项的列表。
1.显示“下一页”。
这个过程本质上是使用
useEffect
在每次呈现时获取“下一页”,依赖于上面的第二个数据元素来知道是否这样做。例如,考虑这种状态:
字符串
然后,您可以创建一个
useEffect
,它将nextPage
作为依赖项,在这种情况下,您将获取nextPage
,将其内容添加到data
,并在服务器指示有另一页数据时更新nextPage
。重要的是,这些更新应该只发生 * 有条件 * 在该效果,所以它最终停止时,最后一个“页面”已经达到。例如:
型
一旦你有了基本的结构,你就可以随心所欲地重构了。例如,如果你想把
axios
操作提取到它自己的函数中,就像你已经做的那样,你只需要给那个函数传递一个指示“下一页”的值,这样你就可以更新在那个函数中获取的URL。