React项目中REST API分页获取数据的技术咨询

1. 后端API适配分页参数 #

首先确认你的后端REST API是否支持分页参数（如page+limit或offset+limit）。如果后端未支持，需先调整后端逻辑，根据参数返回对应范围的数据：

• limit：指定每页展示的数据条数（即你需要的10条）
• page：当前页码（从1开始），后端可通过offset = (page - 1) * limit计算数据起始位置
• 也可直接传入offset参数，指定从第N条数据开始返回

对应调整RTK Query的API定义，让接口接收分页参数：

// 修改playersAPI的endpoint
getplayersAPI: builder.query({
  // 接收包含page、limit（及可选searchTerm）的参数对象
  query: ({ page, limit, searchTerm }) => {
    const params = new URLSearchParams({ limit, page });
    if (searchTerm) params.append('search', searchTerm);
    return createRequest(`/api/players?${params.toString()}`);
  },
}),

2. 前端维护分页状态 #

在Players组件中新增分页相关状态，控制请求的页码：

• 添加currentPage状态，初始值设为1
• 当用户点击「上一页」「下一页」或触发加载更多时，更新currentPage的值
• 调用useGetplayersAPIQuery时，传入page: currentPage和limit: 10参数

3. 分页数据的展示逻辑 #

根据你选择的分页模式处理数据：

• 分页切换（页码按钮）：每次请求新页数据时，直接用返回的新数据替换players状态
• 无限滚动（加载更多）：将新请求到的数据与现有players数组合并，可通过id去重避免重复数据

4. 搜索与分页的协同处理 #

当用户输入搜索词时，需重置分页状态：

• 监听searchTerm变化，在useEffect中将currentPage重置为1
• 确保API支持搜索参数，将searchTerm也传入RTK Query的请求参数中，保证搜索结果从第一页开始展示

5. RTK Query的额外优化 #

• 利用RTK Query的缓存机制，通过keepUnusedDataFor配置保留分页数据的缓存时间，切换页码时无需重复请求
• 若需预加载下一页，可使用usePrefetch钩子提前请求下一页数据，提升用户体验

内容的提问来源于stack exchange，提问作者yandry santana