react hook + ReactPullLoad 下拉刷新，上拉加载

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { FC, useState, useEffect } from 'react';
import ReactPullLoad, { STATS } from 'react-pullload';
import './index.less';
import axios from 'axios';
import { Tag } from 'antd';
import { useSession } from '../../../api/services/session';
import {
  Card,
  WhiteSpace,
  WingBlank,
  SearchBar,
  ActivityIndicator,
} from 'antd-mobile';
import styled from 'styled-components';
import ClickBtn from './byOne/ClickBtn';
const CardStyled = styled(Card)`
  .am-card-header-extra {
    font-size: 0.9rem;
  }
`;
const StickyDiv = styled.div`
  position: sticky;
  top: 3rem;
  left: 0.1rem;
  z-index: 9999;
`;
const FlexDiv = styled.div`
  display: flex;
`;

const RightDiv = styled.div`
  width: 20%;
  text-align: right;
`;
const LeftDiv = styled.div`
  width: 80%;
`;
const OrderNew: FC = () => {
  const session = useSession();

  const [hasMore, setHasMore] = useState(false);
  const [data, setData] = useState([]);
  const [action, setAction] = useState(STATS.init);
  const [loading, setLoading] = useState(false);
  const [pageNo, setPageNo] = useState(0);
  const [pageNum, setPageNum] = useState(0);
  const [prtNo, setprtNo] = useState();
  useEffect(() => {
    if (pageNo == 0) {
      genData();
    }
  }, [data]);
  const handleAction = (actions: STATS | ((prevState: STATS) => STATS)) => {
    //new action must do not equel to old action
    if (actions === action) {
      return false;
    }
    if (actions === STATS.refreshing) {
      handRefreshing();
    } else if (actions === STATS.loading) {
      handLoadMore();
    } else {
      //DO NOT modify below code
      setAction(actions);
      genData(1);
      console.log(pageNum);
    }
  };
  const handRefreshing = () => {
    if (STATS.refreshing === action) {
      return false;
    }
    console.log('handRefreshing');

    // setTimeout(() => {
    //   //refreshing complete
    //   setAction(STATS.refreshed);
    //   setData(cData);
    //   setHasMore(true);
    //   setIndex();
    // }, 3000);
    // setAction(STATS.refreshing);
  };
  const genData = async (pageNumber?: number, searchNo?: string) => {
    // 请求数据的方法
    let page = 0;
    setLoading(true);
    page = pageNumber ? pageNumber : pageNo + 1;
    const search = searchNo == '' ? searchNo : prtNo;
    setPageNo(page);
    return await axios
      .get(
        `/api/${session}/policy/list?pageNum=${page}&pageSize=5&prtNo=${
          search || ''
        }`,
      )
      .then((res) => {
        setLoading(false);
        setPageNum(res.data.pageTotalNum);
        console.log(res.data.data.length);
        if (res.data.data.length < 1 && page != 1) {
          setHasMore(false);
          return;
        }
        setHasMore(true);
        if (page == 1) {
          console.log(res);
          setData(res.data.data);
        } else {
          setData([...data, ...res.data.data]);
        }
      })
      .catch((err) => {
        setLoading(false);
      });
  };
  const handLoadMore = () => {
    if (STATS.loading === action) {
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!hasMore) {
      return;
    }
    genData();
    setTimeout(() => {
      setAction(STATS.reset);
    }, 3000);
    setAction(STATS.loading);
  };
  const getItemPolicyNo = async (no: string) => {
    console.log(no);
    const newDATA = JSON.parse(JSON.stringify(data));
    newDATA[no].grossPremAmtITD = 66;
    setData(newDATA);
    setLoading(true);
    await axios
      .get(`/api/${session}/policy/list?`)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        setLoading(false);
      });
  };

  return (
    <div className="serviceOrg">
      <ActivityIndicator toast={true} text="加载中..." animating={loading} />
      <div style={{ height: '1rem', width: '100vw' }}></div>
      <StickyDiv>
        <SearchBar
          placeholder="请输入投保单号"
          onChange={(val) => {
            setprtNo(val);
            setPageNo(0);
          }}
          onSubmit={(val) => {
            genData();
          }}
          onClear={(val) => {
            setprtNo(val);
            genData(1, '');
          }}
        />
      </StickyDiv>
      <ReactPullLoad
        downEnough={150}
        action={action}
        handleAction={handleAction}
        hasMore={hasMore}
        distanceBottom={100}
      >
        <div style={{ margin: '.5rem' }}>
          {/* <button onClick={handRefreshing}>refreshing</button>
          <button onClick={handLoadMore}>loading more</button> */}
          {data.map((item, index) => {
            return (
              <>
                {item.policyNo && (
                  <WingBlank key={item.policyNo} size="lg">
                    <WhiteSpace size="lg" />
                    <CardStyled>
                      <Card.Header
                        title="养老年金"
                        extra={<>总保费：{item.grossPremAmtITD}</>}
                      ></Card.Header>
                      <Card.Body>
                        <FlexDiv>
                          <LeftDiv>
                            <>保单号：{item.policyNo}</>
                            <br />
                            <>投保单号：{item.prtNo}</>
                          </LeftDiv>
                          <RightDiv>
                            <Tag
                              color="#f50"
                              onClick={() => {
                                getItemPolicyNo(index);
                              }}
                            >
                              拒单
                            </Tag>
                            <Tag color="#2db7f5">待承保</Tag>
                            <Tag color="#87d068">已承保</Tag>
                            {/* <Tag color="#108ee9">#108ee9</Tag> */}
                          </RightDiv>
                        </FlexDiv>
                      </Card.Body>
                      <Card.Footer
                        content={<>创建时间:{item.signedDate}</>}
                        extra={
                          <div>
                            <ClickBtn session={item.sessionId} />
                          </div>
                        }
                      />
                    </CardStyled>
                    <WhiteSpace size="lg" />
                  </WingBlank>
                )}
              </>
            );
          })}
        </div>
      </ReactPullLoad>
    </div>
  );
};

export default OrderNew;

index.less

.pull-load {
	position: relative;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.pull-load-head {
	position: absolute;
	transform: translate3d(0px, -100%, 0px);
	width: 100%;
}
.state-refreshing .pull-load-head,
.state-refreshed .pull-load-head {
	position: relative;
	transform: none;
}
.pull-load-body {
	position: relative;
}
.state-refreshing .pull-load-body {
	transition: transform 0.2s;
}
.state-reset .pull-load-body {
	transition: transform 0.2s;
}
/*
 * HeadNode default UI
 */
.pull-load-head-default {
	text-align: center;
	font-size: 12px;
	line-height: 3rem;
	color: #7676a1;
}
.state-pulling .pull-load-head-default:after {
	content: '下拉刷新';
}
.state-pulling.enough .pull-load-head-default:after {
	content: '松开刷新';
}
.state-refreshing .pull-load-head-default:after {
	content: '正在刷新...';
}
.state-refreshed .pull-load-head-default:after {
	content: '刷新成功';
}
.state-pulling .pull-load-head-default {
	opacity: 1;
}
.state-pulling .pull-load-head-default i {
	display: inline-block;
	font-size: 2em;
	margin-right: .6em;
	vertical-align: middle;
	height: 1em;
	border-left: 1px solid;
	position: relative;
	transition: transform .3s ease;
}
.state-pulling .pull-load-head-default i:before,
.state-pulling .pull-load-head-default i:after {
	content: '';
	position: absolute;
	font-size: .5em;
	width: 1em;
	bottom: 0px;
	border-top: 1px solid;
}
.state-pulling .pull-load-head-default i:before {
	right: 1px;
	transform: rotate(50deg);
	transform-origin: right;
}
.state-pulling .pull-load-head-default i:after {
	left: 0px;
	transform: rotate(-50deg);
	transform-origin: left;
}
.state-pulling.enough .pull-load-head-default i {
	transform: rotate(180deg);
}
.state-refreshing .pull-load-head-default i {
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5rem;
	width: 1em;
	height: 1em;
	border: 2px solid #9494b6;
	border-top-color: #fff;
	border-radius: 100%;
	animation: circle .8s infinite linear;
}
.state-refreshed .pull-load-head-default {
	opacity: 1;
	transition: opacity 1s;
}
.state-refreshed .pull-load-head-default i {
	display: inline-block;
	box-sizing: content-box;
	vertical-align: middle;
	margin-right: 10px;
	font-size: 20px;
	height: 1em;
	width: 1em;
	border: 1px solid;
	border-radius: 100%;
	position: relative;
}
.state-refreshed .pull-load-head-default i:before {
	content: '';
	position: absolute;
	top: 3px;
	left: 7px;
	height: 11px;
	width: 5px;
	border: solid;
	border-width: 0 1px 1px 0;
	transform: rotate(40deg);
}
.pull-load-footer-default {
	text-align: center;
	font-size: 12px;
	line-height: 3rem;
	color: #7676a1;
}
.state-loading .pull-load-footer-default:after {
	content: '加载更多';
}
.pull-load-footer-default.nomore:after {
	content: '没有更多';
}
.state-loading .pull-load-footer-default i {
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5rem;
	width: 1em;
	height: 1em;
	border: 2px solid #9494b6;
	border-top-color: #fff;
	border-radius: 100%;
	animation: circle .8s infinite linear;
}
@keyframes circle {
	100% {
		transform: rotate(360deg);
	}
}