react pc端下拉加载

import React from 'react'
import {article} from '../../api'
import './index.scss'
import debounce from 'lodash/debounce';

export default class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: [],
            dropItemPage: 1
        };
        this.handleDropArticle = debounce(this.handleDropArticle, 500, {leading: true, trailing: false});
    }

    componentDidMount() {
        this.getDropArticle(this.state.dropItemPage)
        window.addEventListener('scroll', this.handleScroll)
    }

    getDropArticle(page) {
        article.category_article({
            page: page
        }).then(res => {
            if(res.data.length ==0){
                alert('没有数据');
                window.removeEventListener('scroll', this.handleScroll)
                return false
            }
            this.setState({
                result: this.state.result.concat(res.data)
            })
        })
    }

    handleDropArticle() {
        return this.getDropArticle(++this.state.dropItemPage)
    }

    handleScroll = () => {
        let isScrollBottom = (parseInt(this.getScrollTop()) + parseInt(this.getClientHeight())) - parseInt(this.getScrollHeight())
        if (isScrollBottom === 0 || isScrollBottom === 1) {
            this.handleDropArticle()
        }
    }

    getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }

    getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    render() {
        return (
            <div className='Index__container'>
                <div className="dorp__column">
                    {this.state.result.map((item, index) => (
                        <div key={index} className="column__item">
                            {item.title}
                        </div>
                    ))}
                </div>
            </div>
        );
    }
}