useInfiniteQuery 但所有数据在每次重新获取时都会重新呈现

Question

我正在尝试通过 React Query 中的 useInfiniteQuery 进行分页，它可以完美地重新获取数据，但是有一个问题，每次添加新数据时，页面都会重新呈现所有数据列表，包括现有数据，然后跳转到页面的头部，而我希望它在滚动时保持获取和呈现新数据。我把它作为文档，所以有人可以帮忙吗？
文档：https://react-query.tanstack.com/examples/load-more-infinite-scroll

  const { ref, inView } = useInView();

  const { status, data, isFetching, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery(["videos", endpoint], getVideo, {
      getNextPageParam: () => 5,
    });

  useEffect(() => {
    if (inView) {
      console.log("Loaded more");
      fetchNextPage();
    }
  }, [inView]);

  return (
    <div className="recommended_videos">
      <h2>Recommended Videos</h2>

      {status === "loading" || isFetching ? (
        <Loader />
      ) : status === "error" ? (
        <div>Error</div>
      ) : (
        <div className="recommended_videos_videos">
          {data?.pages.map((page) =>
            page.data?.items?.map?.((video) => (
              <VideoCard
                video={video}
                id={(video.id.videoId && video.id.videoId) || video.id}
                key={(video.id.videoId && video.id.videoId) || video.id}
              />
            ))
          )}
        </div>
      )}
      <div ref={ref}>
          {isFetchingNextPage ? <Loader /> : null}
      </div>
    </div>
  );
};

Answer 1

我发现问题出在这里

status === "loading" || isFetching ? (<Loader />)

因为每次refetch，isFetching总是变成true，所以所有的分量必须是re-rendered.
实际上我删除了所有这些条件，因为在数据列表下我使用了另一个
顺便说一句，非常感谢您的建议。

useInfiniteQuery 但所有数据在每次重新获取时都会重新呈现

useInfiniteQuery but all the data re-rendered every refetch

reactjs

react-hooks

react-query