react实现触底刷新,接口一次性返回1000条数据类似

后端接口一次性返回1000条数据，展示在前端，目前只想到用滚动条做，如果大佬有更优的解决办法，还请赐教。

初始化设置:

 constructor(props){
        super(props);
        this.state={
            scorollLoading: false,//发送接口加载中标识
            showSize:6,//每次加载几条
            currentSize: 0,//当前加载的位置
            dataList:[
                {name:'1',age:1},
                { name: '2', age: 3 },
                { name: '3', age: 3 },
                { name: '4', age: 4 },
                { name: '5', age: 5 },
                { name: '6', age: 6 },
                { name: '7', age: 7 },
                { name: '8', age: 8 },
                { name: '9', age:9 },
                { name: '10', age: 10 },
                { name: '11', age: 11 },
                { name: '12', age: 12 },
                { name: '13', age: 13 },
                { name: '14', age: 14 },
                { name: '15', age: 15 },
                { name: '16', age: 16 },
                { name: '17', age: 17 },
                { name: '18', age: 18 },
                { name: '19', age: 19 },

            ],//模拟多条数据
            displayList: [],//展示的list
            flag: false,//加载完成
        }
    }

在页面挂载后，添加滚动事件，

componentDidMount(){
        this.getData(this.state.dataList, this.state.showSize);
        window.addEventListener("scroll", this.flashData)
        
}
flashData=()=>{
        // 网页滚动高度 
        var scrollTopHeight = document.body.scrollTop || document.documentElement.scrollTop
        // 文档显示区域的高度
        var showHeight = window.innerHeight
        // 所有内容的高度
        var allHeight = document.body.scrollHeight
        // 只需要判断内容盒子的高度+滚动条的scrollTop = 盒子内容的高度即为触底
        // if (allHeight < scrollTopHeight + showHeight) {
        if (allHeight < scrollTopHeight + showHeight) {
            console.log("触底了:", )
            this.getData(this.state.dataList, this.state.showSize);
        }
}

滚动事件中需要触发每次更新后的数据

getData(listData = [], size = 0) {
        if (this.state.currentSize === listData.length - 1){
            this.setState({
                flag:true
            })
            return;
        }
        let tempList = [];
        for (let i = this.state.currentSize; i < listData.length; i++) {
            if (i >= this.state.currentSize + size) {
                break;
            }
            tempList.push(listData[i]);
        }
        this.setState({
            currentSize: this.state.currentSize+size,
            displayList: [...this.state.displayList, ...tempList],
            flag: this.state.currentSize === listData.length-1?true:false
            // flag:true
        })
    }

                                                                                                                                 在此鸣谢 狗蛋