javascript - React 查询无限滚动 pageParams 未定义

Question

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

这是我的查询钩子(Hook)

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`,
      {},
      {},
    );
  },

Answer 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 调用的“第一页”的内容即可。