无限滚动仅可播放一次

Question

我正在用React构建这个Web应用程序，其中有一个包含帖子的页面。我正在尝试手动实现Infinite Scroll功能，它似乎只能工作一次。

[当窗口上有最后一个元素时，它将调用api以获取更多帖子，但是当我更新状态并获取“新”的最后一个帖子时，它将不再获取更多帖子。我相信我确实已经解决了这个问题，但是我需要你们的一些指导。

提前感谢

这是我的代码

 this.props.getPosts(this.state.page); //for the first load of the page 

 this.scrollListener = window.addEventListener('scroll', (e) => {
        this.handleScroll(e)
 })

handleScroll = (e) => {
        let loadMoreElement = document.querySelector('.postGrid > div:last-child');
        var rect = loadMoreElement.offsetTop + loadMoreElement.clientHeight;
        var pageOffset = window.pageYOffset + window.innerHeight + 200;
        if(pageOffset > rect && !finished && !this.state.loading) {
            this.loadMore()
            this.props.getPosts(this.state.page)
            if(!this.state.has_more){ //has_more it's been set by the API when you get to the last page
                finished = true
                console.log("done")
            }
        } else if (finished){
            console.log("done")
        }}

    loadMore = () => {
        this.setState((prevState) => ({
            page: prevState.page + 1,
            loading: true,
        }))}

Answer 1

您正在loading方法中将loadMore设置为true，但是再次调用loadMore的条件之一是loading为假（!this.state.loading）

[您将需要在某些时候再次将loading设置为false（如果涉及到api调用），或者，如果您使用本地数据，则只需跳过loading:true部分。