react+antd mobile上滑无限滚动异步请求

react+antd mobile上滑无限滚动异步请求

const [hasMore, setHasMore] = useState(true);
const [count, setCount] = useState(0);
const [data, setData] = useState([]);

const loadMore = async () => {
        let res = await getList();
        setData(val => [...val, ...res?.list])//合并数据
        console.log('first', res);
        setHasMore(res?.list?.length > 0)//hasMore为false会停止接口请求
    };

const getList = async () => {
        if (!hasMore) {
            return {
                list: []
            }
        } else {
            await sleep(1000)
            setCount(v => v + 1)
            const ret = getQueryKhList({
                data: {  
                begin: count,//一般为分页参数
                length: 10
                }//传参
            })//这边是ajax请求
            return ret
        }

    }

{(data || []).map(item => {//循环体}}

<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                <InfiniteScrollContent hasMore={hasMore} />
            </InfiniteScroll>