React Query useInfiniteQuery仅获取第一页问题求助

你的问题核心是useInfiniteQuery的下一页参数未正确传递，导致每次请求的pageParam始终为0。结合代码来看，主要有几个关键点需要修正：

1. 未暴露触发下一页的方法 #

当前代码的return对象中没有包含fetchNextPage和hasNextPage，这意味着你无法在组件中触发下一页请求，也无法判断是否还有更多数据。

修正代码：
在return中添加这两个字段：

return { 
  data, 
  error, 
  status, 
  isFetching, 
  refetch,
  fetchNextPage, // 新增：用于触发下一页请求
  hasNextPage,   // 新增：判断是否还有下一页数据
  isFetchingNextPage // 可选：用于显示加载状态
};

2. getNextPageParam逻辑未结合API的next字段 #

你当前的逻辑是无条件返回lastPage.offset + PAGE_LIMIT，但没有根据API返回的next字段判断是否还有下一页。这会导致即使next为null，hasNextPage仍为true，同时如果API返回的offset不符合预期，也会影响下一页参数计算。

修正代码：
调整getNextPageParam，仅当next存在时返回下一页的offset：

getNextPageParam: (lastPage) => {
  // 只有当API返回的next不为null时，才返回下一页的offset
  return lastPage.next ? lastPage.offset + PAGE_LIMIT : undefined;
},

如果API返回的offset可能和传入的pageParam不一致，也可以直接基于上一次的请求参数计算，避免依赖返回的offset：

getNextPageParam: (lastPage, pages) => {
  // 获取上一次请求使用的pageParam
  const lastRequestParam = pages[pages.length - 1]?.pageParam || 0;
  return lastPage.next ? lastRequestParam + PAGE_LIMIT : undefined;
},

3. 确保在组件中触发下一页请求 #

useInfiniteQuery不会自动加载下一页，需要你手动调用fetchNextPage。比如通过按钮点击或滚动监听触发：

// 示例组件使用方式
const { 
  data, 
  fetchNextPage, 
  hasNextPage, 
  isFetchingNextPage 
} = useGetItems();

// 按钮触发加载更多
<button 
  onClick={() => fetchNextPage()}
  disabled={!hasNextPage || isFetchingNextPage}
>
  {isFetchingNextPage ? '加载中...' : hasNextPage ? '加载更多' : '已加载全部'}
</button>

4. 验证API返回的offset正确性 #

确认API返回的data.offset和你传入的pageParam一致。比如第一次传入offset=0，API返回的offset应该是0；传入offset=50时，返回的offset应该是50，这样getNextPageParam的计算才会准确。

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