React-Query v3中useInfiniteQuery无法更新nextPageParam问题

问题根源 #

你的useInfiniteQuery查询函数没有接收并传递React-Query生成的pageParam给apiClient.feedTagSearch，导致每次请求都未携带更新后的页码，始终使用默认值0发起请求。

修复步骤 #

1. 修改useInfiniteQuery的查询函数 #

在调用apiClient.feedTagSearch时，显式传入React-Query提供的pageParam参数：

// FeedListSearch.js
let FeedListSearchQuery = useInfiniteQuery(
  "tagSearch",
  // 接收pageParam，默认值设为0对应第一页
  ({ pageParam = 0 }) => apiClient.feedTagSearch({ pageParam, tags: props.tags }),
  {
    getNextPageParam: (lastPage, pages) => {
      // 计算下一页页码，同时添加是否还有更多数据的判断
      // 示例：如果当前页返回的数据为空，停止请求下一页
      const nextPage = pages.length + 1;
      return lastPage.length > 0 ? nextPage : undefined;
    },
  },
);

2. 优化API请求的URL拼接（可选但推荐） #

使用URLSearchParams替代手动拼接URL，避免参数拼接错误：

// apiClient.js
feedTagSearch: async ({ pageParam = 0, tags }) => {
  const params = new URLSearchParams();
  params.append('pageNumber', pageParam);
  tags.forEach(tag => params.append('tags', tag));
  
  return instance.get('/feed/search', { params })
    .then(response => {
      console.log(response.config.url);
      console.log(response.data);
      return response.data;
    })
    .catch(error => {
      alert("Feed Search Failed" + error);
      throw error; // 抛出错误让React-Query捕获错误状态
    });
},

关键说明 #

• React-Query会在首次请求时使用pageParam的默认值0，后续触发下一页请求时，自动传入getNextPageParam返回的新页码。
• getNextPageParam中添加数据存在性判断，避免无意义的空页码请求，当返回undefined时，React-Query会停止发起下一页请求。

内容的提问来源于stack exchange，提问作者임재현