一、react-waypoint以及安装

可以监听页面是否滚动到底部，监听滚动到底部触发相应的事件。

可以用以下命令来安装： npm install react-waypoint --save或者yarn add react-waypoint。

二、react-waypoint遇到的坑

waypoint失效场景：监听页面滚动到底部时触发加载下一页数据，如果每页的数据较多那么不会出现waypoint失效，如果每页数据较少，则会出现下面的场景：

虽然waypoint暴露了，但是只请求了两次数据便不再触发了。根本原因在于waypoint方法必须是新位置与上一个已知位置发生变化时才会触发，当数据量太少，waypoint持续暴露，waypoint的位置没有发生变化，导致waypoint的方法不被触发。

三、解决方法

更改展示waypoint的条件，每当请求的数据加载完毕再展示waypoint，其他时候隐藏waypoint，上代码：

const [fetchData, setFetchData] = useState('init');
const [hasNext, setHasNext] = useState(true);
// 请求列表
const getVideoWorkList = (type, status, lastContentId) => {
    setFetchData('loading')
    let params = {
        pageLastContentId: lastContentId
    }
    queryAllVideoList(params).then(res => {
        if (res && res.result && res.success) {
            if (res.result.length > 0) {
                ...

                setPageLastContentId(res.result.slice(-1)[0].id)
                setFetchData('loaded')
                setHasNext(true)
            } else {
                setHasNext(false)
                setFetchData(`${status === 'first' ? 'empty' : 'nomore'}`)
            }
        } else {
        // 失败
        if (status === 'first') {
            setFetchData('error')

        } else {
            setFetchData('refresh')
            }
        }
        }).catch(err => {
            if (status === 'first') {
                setFetchData('error')
            } else {
                setFetchData('refresh')
            }})
    }
    
 // 加载更多
const loadMore = () => {
    let type = showAddable ? 'onlyAddable' : 'all'
    getVideoWorkList(type, 'follow', pageLastContentId)
}

// 列表展示
<div>
    {videoWorkList.map(item => {
        return (
            <div
                className="collection-drawer-cardarea"
                key={item.id || item.videoId}
            >
                ...
            </div>
        )
    })}
    {hasNext && fetchData === 'loaded' ?
        <Waypoint onEnter={() => {
            loadMore();
            }}
        >
            <div className="collection-drawer-footext" >
                {fetchData === 'refresh' ? '加载失败，请重试...' : '数据加载中...'}
            </div>
        </Waypoint> :
        <div className="collection-drawer-footext">{fetchData === 'loading' ? '数据加载中...' : '～没有更多了～' }</div>
    }
</div>