如何在React中实现无限滚动与React查询?

Question

我希望我的API获取新的数据，因为在增加页码时，我已经达到了页面的底部，基本上我想无限滚动与React查询。

我已经看了所有的视频，但仍然不明白为什么它不工作。请帮帮我。

events: (30) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
hasNextPage: true

没有提到这个API中可用的页面数量，也没有提到可用的事件总数。检查是否有下一页的唯一方法是通过这个hasNextPage: true属性，它返回true或false

所以我不知道如何使用React-Query，我已经尝试了多种方法。谁能帮助我，如何实现无限滚动使用React-Query与此数据从API。

Answer 1

useInfiniteQuery

如果你的API响应数据没有任何页面信息，您可以使用从getNextPageParam返回的第二个参数来实现您的需求。该参数返回一个数组，其中包含所有获取的页面内容，因此您可以使用它的length作为基。

示例代码:

const {
data, isLoading, fetchNextPage, hasNextPage,
} = useInfiniteQuery({
queryKey: ['someKey'],
queryFn: fetchData,
// here
getNextPageParam: (lastPage, pages) => pages.length + 1,
});

Answer 2

你可以使用npm包react- infinity -scroll-component和useInfiniteQuery钩子。

这篇文章详细地演示了它。

Answer 3

你有useInfiniteQuery和hasNextPage的工作就足够了。

查询:

const { isFetchingNextPage, fetchNextPage, hasNextPage, data } = useInfiniteQuery(
['some-key' ,page, size],
({ pageParam = 0 }) => getList({ page: pageParam, ...params }),
{
getNextPageParam: (lastPage) => (!lastPage.last ? lastPage.number + 1 : undefined),
},
);
const inViewport = useInViewport(ref);
useEffect(() => {
if (inViewport) fetchNextPage();
}, [inViewport]);

你的列表应该是这样的:

<div>
{data?.pages.map((page) => (
<React.Fragment key={page.number}>
{page.events.map(renderItem)} 
</React.Fragment>
))}
{hasMore && (
<div className={styles.loading} ref={ref}>
{isFetchingNextPage && <Spinner/>}
</div>
)}
</div>

Answer 4

你可以使用这个包中的PerfectScrollbar组件来实现它https://www.npmjs.com/package/react-perfect-scrollbar

通过使用prop onYReachEnd你可以调用一个函数首先检查hasNextPage是否为真然后你需要检查当前是否没有获取数据为了不同时获取所有页面，你可以通过检查来做到这一点通过检查loadingGetData是否为假