React 滚动加载--ahooks--useInfiniteScroll

在此之前：您可以移步去官网ahooks了解详情

useInfiniteScroll基本介绍

useInfiniteScroll 封装了常见的无限滚动逻辑。

const { data, loading, loadingMore, loadMore } = useInfiniteScroll(service);

useInfiniteScroll 的第一个参数 service 是一个异步函数，对这个函数的入参和出参有如下约定：

1. service 返回的数据必须包含 list 数组，类型为 { list: any[], ...rest }
2. service 的入参为整合后的最新 data

假如第一次请求返回数据为 { list: [1, 2, 3], nextId: 4 }, 第二次返回的数据为 { list: [4, 5, 6], nextId: 7 }, 则我们会自动合并 list，整合后的的 data 为 { list: [1, 2, 3, 4, 5, 6], nextId: 7 }。

注：这里官方说了对于返回的字段是list，才会帮你进行合并，所以可以跟后端的同学商量返回的数组数据用list做属性名，或者你也可以拿到后端的数据自己生成list属性名。

参数--（参照官网）

Result

参数	说明	类型
data	service 返回的数据，其中的 list 属性为聚合后数据	TData | undefined
loading	是否正在进行首次请求	boolean
loadingMore	是否正在进行更多数据请求	boolean
noMore	是否没有更多数据了，配置 options.isNoMore 后生效	boolean
loadMore	加载更多数据，会自动捕获异常，通过 options.onError 处理	() =