时间戳

首页 > 解决方案 > React Query v3 useInfiniteQuery 返回 isLoading，isFetching 始终为 true，isFetchingNextPage 始终为 false

javascript - React Query v3 useInfiniteQuery 返回 isLoading，isFetching 始终为 true，isFetchingNextPage 始终为 false

问题描述

我已经使用 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,
            };
        });
};

我花了几个小时，但找不到原因。

标签： javascriptreactjsreact-query

解决方案

事实证明这是一个愚蠢的错误。我添加了一个滚动事件侦听器来引用来自具有空数组的道具。在错误代码下方并通过删除空数组进行修复。

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

推荐阅读