乐闻世界logo
搜索文章和话题

React -query 如何使用 useInfiniteQuery ?

7 个月前提问
6 个月前修改
浏览次数52

1个答案

1

React Query 的 useInfiniteQuery 钩子用于实现无限滚动加载数据模式。这个钩子允许您按页码或任何其他逻辑一步步加载数据,并且随着用户的滚动或交互将更多数据加载到列表中。

在使用 useInfiniteQuery 时,您需要提供一个唯一的缓存键和一个函数来获取数据。这个函数接收一个对象,其中包含获取下一页数据所需的信息,例如 pageParam

以下是如何使用 useInfiniteQuery 的一个基本示例:

jsx
import { useInfiniteQuery } from 'react-query'; import axios from 'axios'; // 假设我们有一个API,根据页码返回特定页的数据 const fetchProjects = ({ pageParam = 1 }) => { return axios.get('/api/projects?page=' + pageParam); }; function Projects() { // 使用 useInfiniteQuery 钩子 const { data, error, fetchNextPage, hasNextPage, isFetchingNextPage, status, } = useInfiniteQuery('projects', fetchProjects, { // 获取下一页数据的参数 getNextPageParam: (lastPage, pages) => { // 可以根据返回的最后一页数据和已有页面数组来决定下一页的参数 return lastPage.nextPage ?? false; // 假设API响应中包含了下一页的参数 }, }); // 渲染组件 return ( <div> {status === 'loading' && <p>Loading...</p>} {status === 'error' && <p>Error: {error.message}</p>} {data?.pages.map((group, i) => ( <React.Fragment key={i}> {group.items.map(project => ( <p key={project.id}>{project.name}</p> ))} </React.Fragment> ))} <div> <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage} > {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'Nothing more to load'} </button> </div> </div> ); } export default Projects;

在这个示例中,fetchProjects 是一个调用 API 获取项目数据的函数。我们使用 useInfiniteQuery 来加载这些数据,它的第一个参数是缓存键(这里是 'projects'),第二个参数是获取数据的函数,第三个参数是一个配置对象,包含了 getNextPageParam 函数。这个函数用于确定如何获取下一页的数据。

useInfiniteQuery 返回了一组属性和方法,其中:

  • data 是一个包含每页加载数据的对象。
  • error 包含错误信息。
  • fetchNextPage 是一个函数,用于加载下一页数据。
  • hasNextPage 是一个布尔值,表示是否还有更多页可以加载。
  • isFetchingNextPage 是一个布尔值,表示当前是否正在加载下一页数据。
  • status 是请求的状态,可以是 'loading''error''success'

在 UI 中,我们展开每页加载的数据,并在底部提供一个按钮来加载更多数据。按钮的禁用状态取决于是否有下一页以及是否正在加载下一页。

这只是一个简化的示例,实际应用中可能还需要考虑其他因素,比如缓存管理、数据同步、错误处理等。

2024年6月29日 12:07 回复

你的答案