Блог

Главная - Вопросы по программированию - React Query v3 useInfiniteQuery возвращает isLoading, isFetching всегда true и isFetchingNextPage всегда false

React Query v3 useInfiniteQuery возвращает isLoading, isFetching всегда true и isFetchingNextPage всегда false

#javascript #reactjs #react-query

#javascript #reactjs #react-запрос

Вопрос:

Я реализовал бесконечную прокрутку с помощью useInfiniteQuery из react-query v3. Но isLoading, isFetching всегда true после запроса первой страницы. И isFetchingNextPage всегда false . После начальной загрузки первой страницы запросы на следующую страницу выполняются с помощью 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,
            };
        });
};

Я потратил часы, но не смог найти причину.

Ответ №1:

Оказывается, что это глупая ошибка. Я добавил прослушиватель событий прокрутки в ref, поступающий из реквизитов с пустым массивом. Ниже неправильный код и исправлен путем удаления пустого массива.

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