javascript - React Query v3 useInfiniteQuery 返回 isLoading，isFetching 始终为真，isFetchingNextPage 始终为假

Question

我已经使用 react-query v3 中的 useInfiniteQuery 实现了无限滚动。但 isLoading, isFetching 在第一页查询后始终为真。并且 isFetchingNextPage 始终为 false。初始加载第一页后，使用 fetchNextPage()

发出下一页请求

这是我的useContents钩子(Hook)。

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

事实证明这是一个愚蠢的错误。我向来自具有空数组的 Prop 的 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