antd-mobile InfiniteScroll 无限滚动

需求背景：做一个分页的无限滚动，第一次用这个ui库，也算是吃了点苦头，好记性不如烂笔头记录一下～

框架使用：react + hooks;
注意点：：

1. 如果带有搜索功能尽量不使用useeffct的副作用，官网有带搜索的示例。
2. loadMore函数返回必须为一个promise，否则会引起无限加载的问题。
3. 当加载的页面高度没有撑起loadMore所需的高度时，会再执行一次。 源码是拿 父高度 >= el.top - threshold进行判断执行；

代码部分：
js部分。

 // 接口
 const getAuditList =  async (params: Param) => {
        setParams(params);
        try {
            const res = await api.getApplyAuditList(params);
            if (res && res.list) {
                res.list.length > 0 && res.list.forEach((item: any) => {
                setBusinessList((val: any) => [...val, ...res.list]);
                setHasMore(res.list && res.list.length > 0);
                return;
            }
            setHasMore(false);
        }
        catch {
            setHasMore(false);
        }
    };

// 搜索框
const onKeywordChange = async (customerName: string) => {
        setBusinessList([]);
        setHasMore(false);
        await getAuditList({
            ...params,
            customerName,
            page: 1,
        });
    };

 //无限滚动
 const loadMore = async () => {
       await getAuditList({
          ...params,
          page: params.page + 1,
       });
 };

html部分。

 <div className="business-list">
 				// list部分根据实际业务
                <BusinessCard list={businessList} />
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />
</div>