react 分页请求数据

先这样 后续有时间我在补详情注释

主要引用antd-mobile的InfiniteScroll实现分页

import { InfiniteScroll, List, DotLoading } from 'antd-mobile';

//接口详情
export async function getMyAppointment(props): Promise<any> {
  const { pageNum, pageSize } = props;
  const data = await requestVehicle({
    method: 'post',
    url: `/appointment/getMyAppointment`,
    data: {
      pageNum,
      pageSize
    }
  });
  return data || [];
}

请求接口详情

  // 调用并请求接口详情
  const handleGetMyAppointment = async (val) => {
    try {
      const data = await getMyAppointment(val);
      setCount(count + 1);
      setData(data?.resource);
      setFinish(true);
      return data.resource;
    } catch (error) {
      setFinish(true);
    }
  };

html片段

 {data.length > 0 && finish ? (
        <InfiniteScrollList
          request={handleGetMyAppointment}
          params={{  //请求的参数
            pageNum: count,
            pageSize: 20
          }}
          dom={InfiniteScrollContent}  // 请求的dom
          listenerProp={'carId'}  //可供监听某个值
          title={'maintenance_appointmentList'} //组件title
        />
      ) : (
        <div className={style.maintenance_appointmentList_empty}>
          <img className={style.emptyImg} src='/img/empty.png' alt='' />
          <p className={style.emptyTxt}>目前还没有预约，快去预约吧~</p>
          <button className={style.emptyBtn} onClick={() => toAppointment()}>
            维保预约
          </button>
        </div>
      )}

组件详情

export async function MockRequest(request, params) {
  const data = await request({ ...params });
  return data;
}

import React, { useEffect, useImperativeHandle, useState } from 'react';
import { InfiniteScroll, List, DotLoading } from 'antd-mobile';
import { MockRequest } from './mock-request';
import Empty from '../Empty';

//长度为0时的显示
const InfiniteScrollContent = ({
  hasMore,
  title,
  dataLen
}: {
  hasMore?: boolean;
  title?: string;
  dataLen?: number;
}) => {
  const showBox = () => {
    if (title == 'maintenance' && dataLen == 0) {
      return (
        <div
          style={{
            color: '#BFBFBF',
            marginTop: '126px'
          }}
        >
          暂无维保记录
        </div>
      );
    } else if (title == 'msg' && dataLen == 0) {
      // 车辆消息 系统消息空白
      return <Empty msg={'msg'} />;
    } else {
      return <span>--- 没有更多了 ---</span>;
    }
  };
  return (
    <>
      {hasMore ? (
        <>
          <span>Loading</span>
          <DotLoading />
        </>
      ) : (
        showBox()
      )}
    </>
  );
};

export default (props) => {
  const {
    request,
    params,
    dom,
    listenerProp,
    refreshData,
    changeData,
    delFun,
    title
  } = props;

  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  
//分页的具体执行请求
  async function loadMore() {
    // const append = [];
    const append = await MockRequest(request, params);
    setHasMore(append.length > 0);
    setData((val) => [...val, ...append]);
  }
  
//监听某个值变化
  useEffect(() => {
    setData([]);
    setHasMore(true);
  }, [props.params[listenerProp]]);

  useEffect(() => {
    delFun &&
      delFun(data[0]?.title || data[0]?.msg || '暂无消息', data[0]?.time || '');
  }, [data]);

  useEffect(() => {
    setData([]);
    setHasMore(true);
    changeData && changeData();
  }, [refreshData && refreshData]);

  return (
    <div>
      {data.length > 0 && data.map((item, index) => <>{dom(item, index)}</>)}
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
        <InfiniteScrollContent
          hasMore={hasMore}
          title={title || ''}
          dataLen={data.length}
        />
      </InfiniteScroll>
    </div>
  );
};