React Query useInfiniteQuery无法请求下一页数据问题排查

问题核心在于你当前的getNextPageParam逻辑错误——目标API的返回结果里并没有nextCursor字段，导致每次调用fetchNextPage时无法生成有效的下一页参数。

目标乘客API的返回结构包含page（当前页码）和totalPages（总页数），你需要基于这两个字段来判断并生成下一页参数：

修正后的代码 #

const fetchProjects = async ({ pageParam = 0 }) => {
  const res = await fetch(`https://api.instantwebtools.net/v1/passenger?page=${pageParam}&size=10`);
  return res.json();
};

const List = () => {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['test'],
    queryFn: fetchProjects,
    getNextPageParam: (lastPage) => {
      const nextPage = lastPage.page + 1;
      // 当下一页页码小于总页数时返回参数，否则返回undefined表示无更多数据
      return nextPage < lastPage.totalPages ? nextPage : undefined;
    },
  });

  const loadMore = () => {
    fetchNextPage();
  };

  // 此处添加你的渲染逻辑
};

关键说明 #

• React Query 会自动将getNextPageParam返回的值作为pageParam传入下一次的请求函数fetchProjects
• 当getNextPageParam返回undefined时，hasNextPage会被自动设置为false，此时无需再调用fetchNextPage

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