react+antd Table数据量大翻页问题

在使用table翻页时，调接口快时翻页并不会出现什么问题，当数据请求很慢时会发现翻页时前端页面实现翻页但数据还在请求中的情况，如下图所示

 使用了如下办法解决：

import { useCallback, useEffect, useRef, useState } from "react";
import { Button, Table, Form, Select, ConfigProvider, Empty, message } from 'antd';
import DatePicker from "@/compontens/DatePicker"
import SelectData from "./SelectData";
import YeYaData from "./YeYaData";
import { GetHistoryInfos } from '@/pages/service/oil'
import styles from '../../index.less'
import empty from '@/assets/img/empty.svg'

let getPageTimeout: any
export default (({ lineid }: any) => {
    const formRef = useRef<any>()
    const [form] = Form.useForm();
    const [reload, setReload] = useState(1)
    const [chiLundataSource, setChiLunDataSource] = useState<any>([]); //齿轮油表格数据
    const [current, setCurrent] = useState(1) //表格翻页
    const [chiLuntotal, setChiLunTotal] = useState() //齿轮油总数

    useEffect(() => {
        if (lineid && systemData && timeStart && timeEnd) {
            getTableData({
                systemData, timeStart, timeEnd, current: 1
            })
        }
    }, [reload])
    const getTableData = useCallback(async ({ systemData, timeStart, timeEnd, current }: any) => {
        setShow(true)
        setShowdata(true)
        const data = await GetHistoryInfos({
            LineId: lineid,
            SystemFlag: systemData,  //1 齿轮油，2 液压油
            StartTime: timeStart,
            EndTime: timeEnd,
            pageIndex: current,
            pageSize: 10
        })
        setShow(false)
        if (data) {
            if (systemData == 1) {
                setChiLunDataSource(data?.OHIL)
                setChiLunTotal(data?.Sum)
            } else if (systemData == 2) {
                setYeYaDataSource(data?.OHIL)
                setYeYaTotal(data?.Sum)
            }
        }
        setCurrent(current)
    }, [lineid])



    return <div className={styles.tableWrap}>
        <Form
            layout="inline"
            style={{ paddingBottom: '10px' }}
            ref={formRef}
            form={form}
            onFinish={({ system, startTime, endTime }: any) => {
                if (system) {
                    if (startTime && endTime) {
                        if (isWithinSixMonths(startTime, endTime)) {
                            setSystemData(system)
                            setTimeStart(undefined)
                            setTimeEnd(undefined)
                            message.warn('所选时间大于1年，请缩小时间范围！')
                        } else {
                            setSystemData(system)
                            setTimeStart(startTime)
                            setTimeEnd(endTime)
                            setReload(reload + 1)
                        }
                    } else {
                        message.warn('请选择开始日期和结束日期后查询！')
                    }
                } else {
                    message.warn('请先选择系统！')
                }

            }}
        >
            <Form.Item name="system" label="" style={{ fontSize: '17px', paddingLeft: '10px' }}>
                <Select
                    // defaultValue="0"
                    placeholder='请选择系统'
                    onChange={(item: any) => {
                        setSystemType(item)
                        setShowdata(false)
                        setCurrent(1)
                        form.setFieldsValue({
                            startTime: undefined,
                            endTime: undefined
                        })
                        setStartDate(undefined)
                        setEndDate(undefined)
                    }} style={{ width: "7rem" }} className="ocss-select" popupClassName="ocss-dropdown">
                    <Select.Option value="1">齿轮油</Select.Option>
                    <Select.Option value="2">液压油</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item name="startTime" label="" style={{ fontSize: '17px', marginLeft: '20px' }}>

                        <Ddd placeholder='开始日期' onChange={(date: any) => {
                            setStartDate(date)
                        }}></Ddd>
                

            </Form.Item>
            <Form.Item name="endTime" label="" style={{ fontSize: '17px', marginLeft: '20px' }}>
 <Ddd placeholder='结束日期' onChange={(date: any) => {
                            setEndDate(date)
                        }}></Ddd>

            </Form.Item>
            <Form.Item >
                <Button
                    className='ocss-default-button'
                    style={{
                        color: "#fff",  //#05183A
                        fontWeight: "500",
                        marginTop: "0.1rem",
                        marginLeft: '10px',
                        background: "#1890ff"
                    }}
                    type="text" htmlType="submit"
                >
                    查询
                </Button>
            </Form.Item>
      
        </Form>

                    <ConfigProvider renderEmpty={show ? tableEmptyRendering : tableEmptyRender}>
                        <Table
                            className={styles.scrollTbale}
                            rowKey={'Id'}
                            scroll={{ x: 1500, y: 550 }}
                            columns={[
                                {
                                    title: "序号",
                                    // fixed: "left",
                                    width: 70,
                                    render: (text: any, record: any, index: number) => `${(current - 1) * 10 + (index + 1)}`,
                                    fixed: 'left',
                                },
                                {
                                    title: '温度',
                                    dataIndex: 'Temp',
                                    width: 70,
                                },
                            ]}
                            dataSource={chiLundataSource}
                            pagination={{
                                current: current,
                                pageSize: 10,
                                total: chiLuntotal,
                                onChange: (e) => {
                                    //翻页时使用定时器
                                    clearTimeout(getPageTimeout) //在上面定义了全局数据
                                    getPageTimeout = setTimeout(() => {
                                        clearTimeout(getPageTimeout)
                                        判断翻的页与当前页是否一致，不一样说明翻页了，调接口传参
                                        if (e !== current) getTableData({ systemData, timeStart, timeEnd, current: e })
                                    }, 300);


                                },
                                showSizeChanger: false,
                                showTotal: ((total) => {
                                    return `共 ${total} 条`;
                                }),
                            }}
                        />

    </div>



})
function Ddd({ value, onChange, placeholder }: any) {
    return <DatePicker
        mode={'decade'}
        value={value}
        className="ocss-datepicker  time-pic1"
        popupClassName="ocss-dropdown"
        width="7rem"
        placeholder={placeholder}
        onChange={(date: any) => {
            if (onChange) onChange(date)
        }}

    ></DatePicker>
}
// 判断是否在一年内
function isWithinSixMonths(startDate: any, endDate: any) {
    const start: any = new Date(startDate);
    const end: any = new Date(endDate);
    const differenceInMilliseconds = end - start;
    const differenceInDays = differenceInMilliseconds / (1000 * 60 * 60 * 24);
    const differenceInYears = differenceInDays / 365;

    if (differenceInYears > 1) {
        return true
    } else {
        return false
    }
}