ProTable 如何做到下拉滚动加载数据

1、这里主要是什么呢

这里的关键是$('.ant-table-body').on('scroll', handleScrollEvent); 监听滚动条事件。

1、然后再reuqest 里面设置，是因为ProTable 点击查询时，会进到这里。

2、监听page，是当滚动导致页数，发生变化时，重新加载数据！

import React, { useRef,useEffect, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import documentUtil from '../js/documentUtil';
import {IncomingInspectionBatchView} from './incomingInspectionBatchView';
const $ = require('jquery');

const columns = [
    { "title": "序号", "dataIndex": "seq", "width": 60  , hideInSearch: true},
    {"title": "xxxx", "dataIndex": "materialName", "width": 100},
    {"title": "xxxx", "dataIndex": "materialNumber", "width": 100},
    {"title": "xxxx", "dataIndex": "processName", "width": 100},
    {"title": "xxx", "dataIndex": "feedingBatch", "width": 100},
    {"title": "xxxx", "dataIndex": "equipmentUsed", "width": 100},
    {"title": "xxxx", "dataIndex": "incomingInspectionBatch", "width": 100}
];

const hasMore = {}
export const MaterialDetailsUI = (props) => {
    const {cellNumber} = props
    const [dataSource, setDataSource] = useState([]);
    const [scrollY, setScrollY] = useState(400);
    const [loading,setLoading] = useState(false);
    const [queryValue,setQueryValue] = useState({});
    const [page, setPage] = useState(1);
    const formRef = useRef();  // 创建表单引用

    useEffect(() => {
        documentUtil.initHandleResize(setScrollY)
        const handleScrollEvent = (e) => documentUtil.handleScroll(e, loading,hasMore,setPage);
        $('.ant-table-body').on('scroll', handleScrollEvent);
        hasMore.current = true
        return () => {
            window.removeEventListener('resize',documentUtil.setTableHeight(setScrollY));
        };
      }, []);

      useEffect(() => {
        async function loadDataFunction(params) {
            documentUtil.loadData("getMaterialDetails",page,cellNumber,setLoading,dataSource,setDataSource,hasMore,queryValue);
        }
        if(page != 1){
            loadDataFunction()
        }
      }, [page]);
    return (
        <div id="bomProTableParentId">
            <ProTable
                formRef={formRef}  // 将表单引用传递给 ProTable
                columns={columns}
                dataSource={dataSource}
                request={(params, sorter, filter) => {
                    setQueryValue(params)
                    setPage(1)
                    documentUtil.loadData("getMaterialDetails",1,cellNumber,setLoading,dataSource,setDataSource,hasMore,params,true);
                }}
                rowKey="seq"
                pagination={false}
                search={{ 
                    labelWidth: 'auto' 
                }}
                loading={loading}
                scroll={{ y: 1000, y: scrollY }}
                headerTitle="用料明细"
            />
        </div>
    );
};


export default {
    MaterialDetailsUI
};

2、这里加上防抖函数，因为如果不加上防抖，会导致。

 // 防抖函数
 const debounce = (func, delay) => {
    let timeoutId;
    return (...args) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        func.apply(null, args);
    }, delay);
    };
};

export const handleScroll = debounce((e,loading,hasMore,setPage) => {
    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
    if (scrollHeight - scrollTop <= clientHeight + 10 && !loading && hasMore.current) {
        setPage((prev) => prev + 1);
    }
}, 200); // 防抖时间为200ms

export const loadData = async (method,currentPage,cellNumber,
    setLoading,dataSource,setDataSource,hasMore,param,isRequest) => {
    // 假设 fetchData 是一个获取数据的 API
    if(currentPage == 3){
        console.log("测试....");
    }
    const newData = await getData(method,param,cellNumber,setLoading,currentPage);
    if (newData.length === 0) {
        if(isRequest){
            setDataSource(newData)
        }
        hasMore.current = false; // 确定是否还有更多数据可加载
    } else {
        if(newData.length < Constant.pageSize){
            hasMore.current = false;
        }else{
            hasMore.current = true
        }
        if(isRequest){
            setDataSource(newData)
            return
        }else{
            // 提取当前数据的 id 到一个 Set 中，以便于快速查找
            const existingSeqs = new Set(dataSource.map(item => item.seq));
            // 过滤掉 newData 中已有 id 的项
            const filteredNewData = newData.filter(item => !existingSeqs.has(item.seq));
            // 合并现有数据和过滤后的新数据
            const newTableData = [...dataSource, ...filteredNewData]
            console.log("newTableData = ",newTableData);
            setDataSource(newTableData)
        }
    }
};


async function getData(method,params,cellNumber,setLoading,page){
    let data = []
    try {
        setLoading(true)
        const url = "http://"+Constant.urlHead+"/api/mes/xxx/"+method
        params['cellNumber'] = cellNumber
        params['current'] = page
        params['pageSize'] = Constant.pageSize
        stringUtil.removeExtraSpaces(params)
        const result = await axios.post(url,params);
        if(result.data.code == 200){
            data = result.data.data
        }
    } catch (error) {
        console.log("error = ",error);
        message.error(error.message || 'Something went wrong')
    }finally{
        setLoading(false)
        return data
    }
}