本文介绍如何通过递归式分页请求，利用 useEffect 和状态依赖自动遍历多页 API 响应，将全部数据（如 13 条职位信息）合并为单个数组，避免手动调用多次接口。
本文介绍如何通过递归式分页请求，利用 `useeffect` 和状态依赖自动遍历多页 api 响应，将全部数据（如 13 条职位信息）合并为单个数组，避免手动调用多次接口。
在 React 中处理分页 API（如 Laravel API 的 next_page_url 分页机制）时，仅调用一次 getJobs() 只会返回第一页数据（如示例中的 10 条）。要获取全部数据（例如总计 13 条），需实现自动分页拉取——即根据响应中的 next_page_url 持续发起请求，直到该字段为 null。
✅ 核心思路：状态驱动的分页循环
不使用传统 for/while 循环（React 中不可行），而是借助 useEffect 的依赖更新机制，让组件在 nextPage 改变时自动触发下一页请求，形成“链式加载”。
? 实现步骤
-
定义两个关键状态：
- data: 存储已获取的所有数据（初始为空数组）；
- nextPage: 记录下一页的 URL（初始设为第一页地址或 null）。
使用 useEffect 监听 nextPage：
当 nextPage 非空时发起请求；成功后将新数据追加到 data，并更新 nextPage 为响应中的 next_page_url；若为 null，则停止请求。
以下是优化后的完整代码示例：
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
import React, { useState, useEffect } from 'react';
import { getJobs } from '../service/jobs';
const MyTable = () => {
const [data, setData] = useState([]);
const [nextPage, setNextPage] = useState('http://api/api/v1/jobs?page=1'); // 初始页
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (!nextPage) {
setLoading(false);
return;
}
getJobs(nextPage) // ✅ 修改 getJobs 接受 URL 参数
.then((response) => {
const newData = response.data.data.data || [];
setData((prev) => [...prev, ...newData]);
setNextPage(response.data.next_page_url); // 自动跳转下一页
})
.catch((err) => {
console.error('Failed to fetch jobs:', err);
setError(err.message);
setNextPage(null); // 中断后续请求
});
}, [nextPage]);
// 可选：加载状态提示
if (loading && data.length === 0) return <div>Loading all jobs...</div>;
if (error) return <div>Error: {error}</div>;
return (
<div>
{data.map((job, index) => (
<div key="{job.id" index classname="d-flex">
<h1>{job.id}</h1>
<h1>{job.job_title}</h1>
</div>
))}
{data.length > 0 && (
<p>Total records loaded: <strong>{data.length}</strong></p>
)}
</div>
);
};
export default MyTable;
同时，需更新 getJobs 函数以支持自定义 URL（而非固定路径）：
// ../service/jobs.js
export function getJobs(url) {
return axiosClient.get(url); // ✅ 直接请求传入的分页 URL
}
⚠️ 注意事项与最佳实践
- 避免无限循环：确保 next_page_url 在最后一页返回 null（如示例所示），否则 useEffect 将持续触发。
- 错误容错：添加 catch 并主动设置 setNextPage(null)，防止失败后仍尝试请求。
- 性能考虑：若总页数较多（如上百页），建议增加节流、取消重复请求（可用 AbortController）或改用滚动加载（Infinite Scroll）。
- 唯一 key：渲染列表时优先使用 job.id 作为 key，避免仅依赖 index（尤其在动态增删场景下易引发渲染异常）。
- 服务端优化提示：如业务允许，可向后端提出支持 ?page=all 或 limit=9999 等一次性全量接口，从根本上简化前端逻辑。
通过该方案，你无需预知总页数，即可可靠、声明式地获取全部分页数据，兼顾可读性与 React 的响应式特性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
