React Native中useInfiniteQuery无法翻页问题求助

核心问题定位 #

你的代码存在两个关键问题导致分页失效：

• 查询键未包含动态分页参数：当前queryKey仅固定了接口标识和初始options，没有加入动态变化的页码，导致react-query无法区分不同页的请求，始终复用初始参数请求第一页。
• 查询函数未接收分页参数：查询函数仅从queryKey[1]读取参数，没有处理react-query传递的pageParam，无法将下一页的页码传递给API。

修正后的代码 #

const { data, isLoading, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, refetch } =
  useInfiniteQuery<BovinePaginator, Error>(
    // 将分页参数纳入查询键，确保不同页请求有唯一缓存标识
    [API_ENDPOINTS.BOVINE_IDENTIFICATION, options],
    // 接收pageParam，默认使用初始参数中的页码（无则取1）
    ({ queryKey, pageParam = (queryKey[1] as any).page || 1 }) => {
      // 合并初始参数与当前分页参数
      const requestParams = { ...queryKey[1], page: pageParam };
      return client.bovine.all(requestParams as object);
    },
    {
      getNextPageParam: ({ meta }) => {
        // 计算下一页，无更多页则返回undefined
        const nextPage = meta.current_page + 1;
        return nextPage <= meta.last_page ? { page: nextPage } : undefined;
      },
      enabled: false,
    },
  );

关键修正说明 #

1. 查询函数接收pageParam：调用fetchNextPage时，react-query会把getNextPageParam返回的参数作为pageParam传入查询函数，需用该参数替换初始页码，传递给API接口。
2. 查询键关联动态参数：确保queryKey随分页参数变化，让react-query能正确缓存不同页的数据，避免请求混淆。
3. 优化getNextPageParam逻辑：明确返回下一页参数或undefined，让hasNextPage自动同步状态。

处理refetch重复获取第一页的问题 #

• 若需重置到第一页重新请求，直接调用refetch()即可，这是react-query默认行为。
• 若需保留当前分页状态重新获取数据，调用refetch({ preservePreviousData: true })，会在获取新数据时保留旧数据，同时重新请求当前页。

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