React Hooks antd ListView PullToRefresh长列表上滑分页

import React, { useState, useEffect, useRef, FC } from 'react';
import ReactDOM from 'react-dom';
import {
  ListView,
  PullToRefresh,
  ActivityIndicator,
  Card,
  WhiteSpace,
  WingBlank,
  SearchBar,
} from 'antd-mobile';
import axios from 'axios';
import { useSession } from '@/api/services/session';
import ClickBtn from './byOne/ClickBtn';
import styled from 'styled-components';

const CardStyled = styled(Card)`
  .am-card-header-extra {
    font-size: 0.9rem;
  }
`;

const OrderPage: FC = () => {
  const session = useSession();
  const [pageNum, setPageNum] = useState(0);
  const orgList = useRef([]);
  const lv = useRef();
  const [lvHeight, setLvHeight] = useState(100);
  const [isLoading, setIsLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(true);
  const [pageNo, setPageNo] = useState(0);
  const [prtNo, setprtNo] = useState();
  const [dataSource, setDataSource] = useState(
    new ListView.DataSource({
      //这个dataSource有cloneWithRows方法
      rowHasChanged: (row1: any, row2: any) => row1 !== row2,
    }),
  );

  useEffect(() => {
    const hei =
      document.documentElement.clientHeight -
      ReactDOM.findDOMNode(lv.current).offsetTop;
    setLvHeight(hei);
  }, []);
  useEffect(() => {
    setIsLoading(true);
    setRefreshing(true);
    genData();
  }, []);
  const genData = async () => {
    // 请求数据的方法
    let page = 0;
    page = pageNo + 1;

    setPageNo(page);
    return await axios
      .get(
        `/api/${session}/policy/list?pageNum=${page}&pageSize=5&prtNo=${
          prtNo || ''
        }`,
      )
      .then((res) => {
        setPageNum(res.data.pageTotalNum);
        if (res.data.data.length < 1 && page != 1) {
          setIsLoading(false);
          setRefreshing(false);
          console.log('终止');

          return;
        }
        console.log(page);

        if (page == 1) {
          setDataSource(dataSource.cloneWithRows(res.data.data));

          orgList.current = res.data.data;
          console.log(dataSource);
        } else {
          setDataSource(
            dataSource.cloneWithRows([...orgList.current, ...res.data.data]),
          );
          orgList.current = [...orgList.current, ...res.data.data];
        }
        setRefreshing(false);
        setIsLoading(false);
      });
  };
  const onEndReached = () => {
    genData();
    console.log(dataSource);
  };
  const onRefresh = () => {
    genData();
    console.log(dataSource);
  };
  const renderCard = (item) => {
    return (
      <>
        {item.policyNo && (
          <WingBlank key={item.policyNo} size="lg">
            <WhiteSpace size="lg" />
            <CardStyled>
              <Card.Header
                title="养老年金"
                extra={<>总保费：{item.grossPremAmtITD}</>}
              ></Card.Header>
              <Card.Body>
                <div>
                  <>保单号：{item.policyNo}</>
                  <br />
                  <>投保单号：{item.prtNo}</>
                </div>
              </Card.Body>
              <Card.Footer
                content={<>创建时间:{item.signedDate}</>}
                extra={
                  <div>
                    <ClickBtn session={item.sessionId} />
                  </div>
                }
              />
            </CardStyled>
            <WhiteSpace size="lg" />
          </WingBlank>
        )}
      </>
    );
  };
  return (
    <div className="serviceOrg">
      <ActivityIndicator toast={true} text="加载中..." animating={refreshing} />
      <div style={{ height: '1rem' }}></div>
      <SearchBar
        placeholder="请输入投保单号"
        onChange={(val) => {
          setprtNo(val);
          setPageNo(0);
          console.log(pageNo);
        }}
        onSubmit={(val) => {
          genData();
        }}
      />
      <ListView
        ref={lv}
        dataSource={dataSource}
        renderFooter={() => (
          <div style={{ padding: 10, textAlign: 'center' }}>
            {isLoading
              ? 'Loading...'
              : orgList.current.length > pageNum
              ? '哎呀，到底了'
              : '加载完成'}
          </div>
        )}
        renderRow={renderCard}
        style={{
          height: lvHeight,
          overflow: 'auto',
          margin: '5px 0',
        }}
        pageSize={5}
        pullToRefresh={
          <PullToRefresh
            refreshing={refreshing}
            onRefresh={onRefresh} //下拉刷新
          />
        }
        scrollRenderAheadDistance={100} //当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行
        onEndReached={onEndReached} //上拉加载
        onEndReachedThreshold={10} //调用onEndReached之前的临界值，单位是像素
      />
    </div>
  );
};

export default OrderPage;