React Query v3 useInfiniteQuery 返回 isLoading，isFetching 始終為 true，isFetchingNextPage 始終為 false

Question

我已經使用react-query v3中的useInfiniteQuery實現了無限滾動。 但是isLoading ， isFetching在第一頁查詢后始終為真。 而且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

事實證明這是一個愚蠢的錯誤。 我添加了一個滾動事件偵聽器來引用來自具有空數組的道具。 在錯誤代碼下方並通過刪除空數組進行修復。

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