这是您的帖子翻译成英文：
在这篇文章中，我将教您如何使用 tanstack 查询（特别是无限查询）实现无限滚动。我们将使用 vite 创建照片源并设置无限滚动。首先，打开终端并运行以下命令来克隆具有基本配置的项目：
git clone --branch start https://github.com/davi-rezende/photos-feed.git cd photos-feed npm i
一切就绪！现在，让我们使用 tanstack 查询库实现无限滚动功能。使用以下命令安装它：
npm i @tanstack/react-query npm i axios
在 app.tsx 文件中，您会看到代码如下所示：
首先，我们将使用 useinfinitequery 替换 useeffect，useinfinitequery 负责管理无限请求。我们必须为其提供两个属性：querykey 和 queryfn，如下所示：
const {
data,
isloading,
fetchnextpage,
isfetchingnextpage,
isfetching,
hasnextpage
} = useinfinitequery({
queryfn: fetchphotos,
querykey: ['photos'],
initialpageparam: 1,
getnextpageparam: (lastpage) => {
return lastpage.nextpage
}
})
各参数说明：
- queryfn：负责返回我们请求数据的函数；它接收当前页面作为参数。
- querykey：充当请求的标识符，也充当依赖项数组。每次您在其中传递的变量发生变化时，useinfinitequery 都会自动重新获取。
- initialpageparam: 初始默认值。
- getnextpageparam：接收 queryfn 函数返回的所有内容，并且必须返回要请求的下一个页码。
我们需要修改 fetchphotos 函数：
async function fetchphotos({ pageparam }: { pageparam: number }) {
const response = await api.get('/photos', {
params: {
page: pageparam,
per_page: 5,
}
})
return {
data: response.data,
nextpage: pageparam + 1
}
}
useinfinitequery 钩子返回页面中的数据，因此我们的渲染会略有变化：
我秀秀淘宝客api源码
下载
程序介绍：程序采用.net 2.0进行开发，全自动应用淘客api，自动采集信息，无需，手工更新，源码完全开放。（程序改进 无需填入阿里妈妈淘客API 您只要修改app_code文件下的config.cs文件中的id为你的淘客id即可）针对淘客3/300毫秒的查询限制，系统采用相应的解决方案，可以解决大部分因此限制带来的问题；程序采用全局异常，避免偶尔没考虑到的异常带来的问题；程序源码全部开放，请使
{isloading ? 'loading...' : ( <> {data?.pages.map((group, i) => ( {group.data.map(({ id, urls }) => ( @@##@@ ))}))}{isfetching && !isfetchingnextpage ? 'fetching...' : null})}
现在，每次用户到达滚动末尾并单击“加载更多”按钮时，数据都会自动附加。
要在用户到达滚动末尾时获取下一页而不需要单击按钮，只需添加以下函数：
function handlescroll(event: uievent) { const { scrolltop, clientheight, scrollheight } = event.currenttarget if (scrolltop + clientheight >= scrollheight) { fetchnextpage() } }
并在包装列表的 div 中添加 onscroll 事件，并调用那里的函数。完毕！现在，每次用户滚动到末尾时，都会自动加载新数据。
最后，您的代码应如下所示：
import { useInfiniteQuery } from "@tanstack/react-query"
import { UIEvent } from "react"
import { api } from "./lib/api"
type ImageData = {
id: string,
urls: {
regular: string
}
}
export function Home() {
async function fetchPhotos({ pageParam }: { pageParam: number }) {
const response = await api.get('/photos', {
params: {
page: pageParam,
per_page: 5,
}
})
return {
data: response.data,
nextPage: pageParam + 1
}
}
const { data, isLoading, fetchNextPage, isFetchingNextPage, isFetching, hasNextPage } = useInfiniteQuery({
queryFn: fetchPhotos,
queryKey: ['photos'],
initialPageParam: 1,
getNextPageParam: (lastPage) => {
return lastPage.nextPage
}
})
function handleScroll(event: UIEvent) {
const { scrollTop, clientHeight, scrollHeight } = event.currentTarget
if (scrollTop + clientHeight >= scrollHeight) {
fetchNextPage()
}
};
return (
{isLoading ? 'Loading...' : (
<>
{data?.pages.map((group, i) => (
{group.data.map(({ id, urls }) => (
@@##@@
))}
))}
{isFetching && !isFetchingNextPage ? 'Fetching...' : null}
)}
)
}
谢谢！
