Firebase InfiniteScroll 未按预期运行

Question

所以我正在制作一个社交媒体应用程序，现在一切都很好。最后一个问题是，每次我打开应用程序时，API 都会获取所有帖子，现在这已经是个问题了。我试图阅读所有资料以了解如何制作，但现在我被卡住了。

我的应用使用 Firebase + Redux + React，所以实现起来比其他应用要难一些。我创建了一个函数来获取第一组帖子列表，它工作正常，但列表的第二个函数返回与第一个函数相同，即使我插入 startAfter() 和 limit()

我想要什么：我希望第二个函数为我获取下一个帖子查询，而不复制第一个函数中的任何帖子，我还想了解我需要在 startAfter 中传递什么

现实：第二个函数确实运行，它确实获得了新帖子，但它是相同的帖子，所以如果我的列表有 5 个帖子，它会返回 2 组 3 个看起来相同的帖子

这是我使用 Firebase 的第一个功能：

exports.getFirstSetOfPosts = (req, res) => {
    db.collection('posts')
    .orderBy('createdTime', 'desc')
    .limit(3)
    .get()
    .then(data => {
        let lastVisible = data.docs[data.docs.length-1];
        let posts = [];
        data.forEach(doc => {
            posts.push({
                postID: doc.id,
                body: doc.data().body,
                userHandle: doc.data().userHandle,
                createdTime: doc.data().createdTime,
                commentCount: doc.data().commentCount,
                likeCount: doc.data().likeCount,
                userImage: doc.data().userImage,
                imagePostUrl: doc.data().imagePostUrl
            });
        });
        return res.json( {posts,last: lastVisible});
    })
    .catch( (err) => {
        console.log(err);
        res.status(500).json({ error: err.code });
    });
}

这是我获取下一篇文章的第二个功能：

exports.fetchMoreData = (req, res) => {
    db.collection('posts')
    .orderBy('createdTime', 'desc')
    .startAfter(req.params.last)
    .limit(3)
    .get()
    .then(data => {
        let lastVisible = data.docs[data.docs.length-1];
        let posts = [];
        data.forEach(doc => {
            posts.push({
                postID: doc.id,
                body: doc.data().body,
                userHandle: doc.data().userHandle,
                createdTime: doc.data().createdTime,
                commentCount: doc.data().commentCount,
                likeCount: doc.data().likeCount,
                userImage: doc.data().userImage,
                imagePostUrl: doc.data().imagePostUrl
            });
        });
        return res.json( {posts,last: lastVisible});
    })
    .catch( (err) => {
        console.log(err);
        res.status(500).json({ error: err.code });
    });
  };

Image about my posts list 有人可以帮助我:(我几天来一直在寻找答案。

_ req.params.last obj ： enter image description here

_一篇文章的数据结构： enter image description here

Answer 1

我终于解决了我的问题，非常感谢：FRUNKAD，他们让我知道需要在我的 FecthMoreData 函数中传递什么

_答案：

exports.fetchMoreData = (req, res) => {
    db.collection('posts')
    .orderBy('createdTime', 'desc')
    .startAfter(req.params.last)
    .limit(1)
    .get()
    .then(data => {
        let lastVisible = data.docs[data.docs.length-1]._fieldsProto.createdTime.stringValue;
        let posts = [];
        data.forEach(doc => {
            posts.push({
                postID: doc.id,
                body: doc.data().body,
                userHandle: doc.data().userHandle,
                createdTime: doc.data().createdTime,
                commentCount: doc.data().commentCount,
                likeCount: doc.data().likeCount,
                userImage: doc.data().userImage,
                imagePostUrl: doc.data().imagePostUrl
            });
        });
        return res.json( {posts,last: lastVisible});
    })
    .catch( (err) => {
        console.log(err);
        res.status(500).json({ error: err.code });
    });
  };

您需要传递给 startAfter() 的是您在 Firebase 中订购数据的内容 我也使用“react-infinite-scroll-component”：“^5.0.5”来实现infiniteScroll，所以对于任何使用Redux + Firebase + React想要设置infiniteScroll的人来说，这就是它的样子：

            <InfiniteScroll
                dataLength={this.props.data.posts.length} 
                next={() => this.props.getMorePosts(last)}
                hasMore={this.props.data.posts.length < this.props.data.numberOfPosts ? 
                true : false}
                loader={<p>Loading...</p>}
                endMessage={
                  <p style={{textAlign: 'center'}}>
                    <b>Yay! You have seen it all</b>
                  </p>
                }>
                    {posts.map(post =>{return <Post key={post.postID} passedID={post.postID} name={post.userHandle} post={post} />}) }
                </InfiniteScroll> 

• dataLength：是您的帖子存储在 redux 存储中的数组的长度
• next : 是您传递 ${function} 和 ${last} 的地方（在我的情况下，最后一个是我为 orderBy 我的数据库创建的时间戳）
• hasMore : 你需要比较你当前在 redux 商店中的帖子数组长度和你拥有的所有帖子（你可能需要从你自己的 api 中创建一个函数来计算有多少帖子可以滚动）李>
• loader 是一个加载器。
• endMessages 是一样的。