React Infinite Scroll与React Query加载下一页数据失败排查求助

针对你遇到的自定义Mock API无法触发加载更多的问题，从以下核心点逐一排查修复：

1. 确认分页参数与API要求匹配 #

检查你的Mock API接受的分页参数规则，部分API使用offset/limit而非page/limit，如果请求参数和后端要求不匹配，会导致重复返回第一页数据，React Query会误判为无更多内容，停止触发加载。

2. 修复hasNextPage判断逻辑 #

无限滚动的触发依赖于「是否还有下一页」的判断，必须根据自定义API的返回结构调整逻辑：

getNextPageParam: (lastPage, allPages) => {
  const currentLoadedCount = allPages.length * 10;
  // 假设API返回的总数据条数在 lastPage.data.data.total 字段
  return lastPage.data.data.total > currentLoadedCount ? allPages.length + 1 : undefined;
}

如果沿用JSONPlaceholder的固定总条数判断逻辑，会错误终止加载流程。

3. 同步InfiniteScroll的hasMore属性 #

确保InfiniteScroll组件的hasMore严格对应React Query返回的hasNextPage状态：

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(/* 配置项 */);

<InfiniteScroll
  dataLength={data?.pages.length || 0}
  next={fetchNextPage}
  hasMore={hasNextPage}
  loader={<h4>Loading...</h4>}
>
  {/* 帖子列表渲染逻辑 */}
</InfiniteScroll>

若hasMore被错误设置为false，组件不会触发加载更多操作。

4. 正确整合分页数据 #

自定义API返回结构为pg.data.data.data，需在select函数中正确扁平化数据，确保列表长度随分页请求更新：

select: (data) => ({
  pages: data.pages.flatMap(page => page.data.data.data),
  pageParams: data.pageParams,
})

如果数据未正确拼接，dataLength不会变化，InfiniteScroll无法检测到加载时机。

5. 调试API请求与响应 #

通过浏览器DevTools的Network面板验证：

• 请求参数中的page是否逐次递增
• 响应数据是否包含新的帖子条目
• 总数据条数是否大于当前已加载的数量

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