react-hook+antd-mobile ListView长列表分页

• 用react-hook + ListView实现长列表分页，代码如下：

import { ListView, ActivityIndicator } from 'antd-mobile';
import React, { useState, useEffect, useCallback } from 'react';
import Header from '../../components/Header/index';
import styles from './index.module.css';
import CustomCard from '../../components/Card';
import classnames from 'classnames';
import Api from '../../lib/api';
import get from 'lodash/get';

const ListViewExample = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [hasMore, setHasMore] = useState(true);
  const [pageNum, setPageNum] = useState(0);
  const [isFetching, setIsFetching] = useState(true);

  const listDataSource = new ListView.DataSource({
    rowHasChanged: (row1: any, row2: any) => true
  });
  const [dataSource, setDataSource] = useState(listDataSource);
  const [dataList, setDataList] = useState<any[]>([]);

  const getProgressData = useCallback(
    (page: number) => {
      setIsFetching(true);
      Api.get('/api/getData', {
        params: {
          page,
          size: 10
        }
      })
        .then(res => {
          setIsLoading(false);
          if (get(res, 'data.content').length === 0) {
            setHasMore(false);
            return false;
          }

          setDataList([...dataList, ...get(res, 'data.content')]);
          setDataSource(dataSource.cloneWithRows([...dataList, ...get(res, 'data.content')]));
        })
        .catch((err:any) => {
          console.log(err)
        })
        .finally(() => {
          setIsFetching(false);
        });
    },
    [pageNum, dataList, setDataList, setDataSource, setHasMore]
  );

  const onEndReached = () => {
    if (!hasMore) {
      return;
    }
    setPageNum(pageNum + 1);
    getProgressData(pageNum + 1);
  };

  useEffect(() => {
    getProgressData(1);
  }, []);

  const renderCard = (item: any, sectionID: any, rowID: any) => {
    return (
      <CustomCard key={sectionID + rowID}>    
          <div className={styles.cardContent}>
            <div className={classnames(styles.cardList, styles.companyIcon)}>
              企业名称：{item.enterpriseName || '-'}
            </div>
      </CustomCard>
    );
  };

  return (
    <div className={styles.serviceContainer}>
      <ActivityIndicator toast={true} text="加载中..." animating={isLoading} />
      {dataList.length > 0 && (
        <ListView
          renderHeader={() => (
            <>
              <div className={styles.topContainer} />
              <Header showShare={false} showReturn={true} />
            </>
          )}
          dataSource={dataSource}
          renderFooter={() => <div className={styles.footer}>{isFetching ? '加载中...' : '哎呀，到底了'}</div>}
          renderBodyComponent={() => <div />}
          renderRow={renderCard}
          className={styles.listContent}
          initialListSize={10}
          pageSize={10}
          scrollRenderAheadDistance={500}
          onEndReached={onEndReached}
          onEndReachedThreshold={10}
        />
      )}
    </div>
  );
};

export default ListViewExample;