Table数据-滚动加载

	const tableRef = useRef(null);
	const [pageSize, setPageSize] = useState(20)
	const [pageNumber, setPageNumber] = useState(1)
	const [tableData, setTableData] = useState([])

  useEffect(() => {
    setPageNumber(1);
    setTableData([])
    getList(1);
  }, [searchValue])
  
const getList = (PageNumber: number) => {
    getReportDetail({
      pageNumber: PageNumber,
      pageSize,
    }).then((res: any) => {
      if (res.status === 0) {
        const { records } = res.data;
        if (!Array.isArray(records)) {
          return
        }
        
        let newData: any = records;
        if (records.length > 0 && PageNumber !== 1) {
          newData = tableData.concat(records)
        }
        setTableData(newData || [])
      }
    })
  }

 // 滚动事件的执行函数，加了个节流
  const handleScroll = () => {
    if (!timer) {
      timer = setTimeout(() => {
        const tableItem = tableRef?.current?.querySelector('.ant-table-row');
        const tableBody = tableRef?.current?.querySelector('.ant-table-body');
        
        // 可视距离+滚动距离 = 已渲染距离
        // 加上一个tr的高度，做一个缓冲。
        const renderDistance = tableBody?.scrollTop + tableBody?.clientHeight + tableItem?.clientHeight;

        // 已渲染距离大于请求数据的距离时请求数据
        if (renderDistance >= tableBody?.scrollHeight) {
          const newpageNumber = pageNumber + 1
          setPageNumber(newpageNumber)
        }
        timer = null;
      }, 1000)
    }
  };

<Table
	key="id"
	ref={tableRef}
	columns={columns as any}
	scroll={{ y: 605 }}
	dataSource={tableData}
	pagination={false}
/>