React 查询无限滚动 pageParams 未定义

【问题标题】：React query infinite scroll pageParams is undefinedReact 查询无限滚动 pageParams 未定义
【发布时间】：2023-02-21 10:32:55
【问题描述】：

我正在尝试使用 useInfiniteQuery 获取数据，但在我的控制台上，我正在获取数据但 pageParams 显示未定义，我是否缺少获取 pageParams 的内容？

这是我的查询挂钩

const useActivityFeedData = () => {
  const {data} = useInfiniteQuery(
    ACTIVITY_FEED,
    ({pageParam}) => Api.user.getActivityFeedData(pageParam),
    {
      getNextPageParam: (lastPage: any) => lastPage?.meta,
    },
  );
console.log(data)
};

我的API

  getActivityFeedData: (pageParam: number) => {
    console.log(pageParam, 'pageParam'); // undefined

    return api.get(
      `/rest/s1/eyon/viewer/channel/activity-feed?pageSize=10&pageIndex=0`,
      {},
      {},
    );
  },

【问题讨论】：

标签： javascript reactjs react-hooks react-query

【解决方案1】：

你没有遗漏任何东西——这是预期的行为。 pageParams 始终针对下一个页面，通常来自以前的结果。这就是你在getNextPageParams 中所做的。

对于第一页，没有“上一个结果”，因为它是第一页。这就是为什么 pageParams 是 undefined 的原因。请注意我们在示例中的解构过程中如何使用默认值，例如：

const queryResult = useInfiniteQuery(
  ['projects'],
  ({ pageParam = 0 }) => axios.get('/api/projects?cursor=' + pageParam),
  {
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
  }
)

对于第一页，cursor 将设置为 0，因为 pageParam 是 undefined。

因此，您可以将 undefined 转换为代表您的 api 调用的“第一页”的内容。

【讨论】：