React Query v3 useInfiniteQuery returns isLoading，isFetching 始终为真，isFetchingNextPage 始终为假

Question

我已经使用来自 react-query v3 的 useInfiniteQuery 实现了无限滚动。但是 isLoading、isFetching 在第一页查询后 always true。 isFetchingNextPage 始终为假。初始加载第一页后，使用 fetchNextPage()

发出下一页请求

这是我的 useContents 挂钩。

const useContents = (params) => {
    return useInfiniteQuery(
        ['contents', params.Section],
        ({ pageParam = 0 }) => fetchContents(pageParam, params), {
            getNextPageParam: (lastPage, allPages) => {
                if (lastPage.payload.size === PAGE_SIZE) return allPages.length;
                return false;
            },
            refetchInterval: 60000,
            staleTime: 60000,
        }
    );
};

这是 fetchContents

const fetchContents = (pageParam, params) => {
    return axios
        .get(`${apiDomain}/contents`, {
            params: {
                Section: params.Section,
                ViewType: params.ViewType,
                Count: pageParam*PAGE_SIZE,
                PageSize: PAGE_SIZE,
                ...params.questionSectionParam,
            },
            ...generateAxiosOptions('GET'),
        })
        .then((res) => {
            return {
                message: res.data.message,
                payload: fromJS(res.data.payload),
                result: res.data.result,
                status: res.status,
                pageParam,
            };
        });
};

我花了好几个小时都没找到原因。

Answer 1

事实证明这是一个愚蠢的错误。我向来自具有空数组的道具的 ref 添加了一个滚动事件侦听器。下面的错误代码已通过删除空数组修复。

useEffect(() => {
  !!contentListRef && contentListRef.addEventListener('scroll', infiniteScroller, false);
  return () => {
    lastScrollTop = 0;
    contentListRef.removeEventListener('scroll', infiniteScroller, false);
  };
}, []); // <-- This empty array is the reason for this bug

React Query v3 useInfiniteQuery returns isLoading，isFetching 始终为真，isFetchingNextPage 始终为假

React Query v3 useInfiniteQuery returns isLoading, isFetching always true and isFetchingNextPage always false

javascript

reactjs

react-query