reactjs - Firebase 实时数据库分页未按预期工作

Question

我有一个 React 页面，我从我的 firebase 实时数据库中加载帖子。数据库结构如下：

posts
-abcdefh
  body: 1st post
  createdAt: 1
-ijklmnop
  body: 2nd post
  createdAt: 2
.
.
.

我第一次使用下面的 useEffect 挂钩来获取前两个帖子。

    useEffect(()=>{
        let isMounted = true;
        if (isMounted){
            window.addEventListener('scroll', loadMore);            
            let posts = [];
            fbRef.db.ref().child('/posts').orderByChild('createdAt').limitToFirst(2).on('value', (snapshot)=>{
                snapshot.forEach((childSnapshot)=>{                
                    posts.push({...childSnapshot.val(), key: childSnapshot.key});
                }); 
                setPosts(posts);
                console.log('post set');            
            });
        }
        return ()=>{isMounted = false; window.removeEventListener('scroll', loadMore);}
    }, []);

当滚动到页面底部时，loadMore() 函数会触发 getPosts() 函数以获取接下来的 2 个帖子，如下所示：

    const loadMore = ()=>{
        if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight){
            getPosts();
        }
    }

    //Get the next two posts in the list

    const getPosts = ()=>{
        let posts = [];
        fbRef.db.ref().child('/posts').orderByChild('createdAt').limitToFirst(2).startAfter(last).on('value', (snapshot)=>{
            snapshot.forEach((childSnapshot)=>{                
                posts.push({...childSnapshot.val(), key: childSnapshot.key});
            });
            setPosts(posts);           
        });
    }

状态变量“last”用于跟踪从数据库中获取的最后一篇文章。这是在另一个 useEffect 挂钩中设置的：

    useEffect(()=>{
        if (posts.length>0){
            setLast(posts.at(-1).key);
        }
    }, [posts]);

问题：当页面加载时，第一个和第二个帖子按预期显示，但在滚动到底部时，即使 startAfter() 函数预计会返回列表中的下两个帖子，也会再次加载相同的两个帖子。当 getPosts() 函数被触发时，如何加载列表中的下两个帖子？任何帮助将不胜感激！

标签： reactjsfirebasefirebase-realtime-databasereact-hooks