react中实现滚动加载

import React, { useState, useEffect } from 'react';

const InfiniteScroll = () => {

  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchData();
  }, []);

const fetchData = () => {
    setLoading(true);
    // 模拟异步请求数据
    setTimeout(() => {
    const newData = [...data];
    for (let i = 0; i< 10; i++) {
            newData.push(`Item ${newData.length + i + 1}`);
        }
        setData(newData);
        setLoading(false);
        setPage(page + 1);
    }, 1000);
 };

 const handleScroll = (event) => {
 const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;

 if (scrollHeight - scrollTop === clientHeight && !loading) {
     fetchData();
 }};

return (
    <div style={{ height: '400px', overflow: 'auto' }} onScroll={handleScroll}>
        {data.map((item, index) => (
        <div key={index}>{item}</div>
    ))}
    {loading && <div style={{ textAlign: 'center' }}>Loading...</div>}
    </div>
  );
};

export default InfiniteScroll;

class InfiniteScroll extends React.Component {
    
    constructor(props) {
        super(props)
        this.state = {
            dataList:{},
            loading:false
        }
     }
    
    handleScroll(event) {
        const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
        if (scrollHeight - scrollTop === clientHeight && !this.state.loading) {
            this.fetchData();
        }
    };

    fetchData() {
        const { dataList} = this.state
        if (data.total < data.size) {
            return
        }
        let size2 = this.state.size += 20
        this.setState({
            loading: true,
            size: size2
        }, () => {
            this.query(this.state.objlist)
        })
    }
    // 查询信息列表
    query(e) {
        let obj = e ? e : {}
        axios.post(`/api?=${1}&size=${this.state.size}`, obj).then(res => {
            this.setState({
                loading: false,
                dataList: res,
            })
        })
    }
    render(){
      const { dataList } = this.state

      retutn(
        <div style={{ height: '400px', overflow: 'auto' }} onScroll={()=> this.handleScroll()}>
            {
               dataList.data && dataList.data.length > 0 ?
                         data.data.map(res => {
                            return (<div key={res.aaaa} {res.aaa}</div>)
                         })
                        : ''
                    }
        </div>
     )
    }
}
export default InfiniteScroll 

以上就是函数组件跟类组件的不同写法了，如有更好的方法请各位大佬指教