Firestore .startAt 无法正常工作

Question

infiniteHandler($state) {
    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
        })
        $state.loaded()
    })
}

这是我的无限加载处理程序，一旦到达列表末尾，它就会获取新的数据库条目。到目前为止工作正常。

这是我在页面加载时的第一次抓取

async fetch({ store }){
    if (store.state.modules.posts.posts.length < 5) {
        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    posts.push(x)
                })
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}

基本上，问题是当我在无限加载处理程序中获取时，我在页面加载时再次获取前 3 个条目，这导致条目显示两次，这不应该发生，因为 this.lastVisible 有我在加载时获取的第三个元素的时间戳，所以应该忽略这些。

在这些元素之后，.startAfter 一切正常，但前 3 个再次加载没有意义。 我用 devtools 检查了商店，一切正常，this.lastVisible 在第一次调用无限加载处理程序时具有正确的值。

赏金编辑： 好的，所以我仍然有这个问题，我尝试更多地解决它以找到问题，但它仍然在发生......我现在将设置一个赏金，我希望任何人都能够提供帮助。

Answer 1

您实际上并不需要第一次提取。挂载时将自行调用infiniteHandler。如果它没有调用，那么您可以尝试使用该函数

this.$refs.infiniteLoading.attemptLoad(); // 'infiniteLoading' 是组件的 ref 属性

这实际上会为你调用infiniteHandler函数。

编辑：检查其中一个功能是否正在运行。在处理程序部分

infiniteHandler($state) {
    //Check if its currently loading
    this.$nextTick(()=>{
       if (this.isDocSnapShotLoading){
           return;
       }
    });

    //set as currently loading
    this.isDocSnapShotLoading = true;

    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
        })
        $state.loaded()

        //set completed loading
        this.isDocSnapShotLoading = false;
    })
}

在获取部分

async fetch({ store }){
    if (store.state.modules.posts.posts.length < 5) {

        //check if currently loading
        this.$nextTick(()=>{
           if (this.isDocSnapShotLoading){
              return;
           }
       });

        //set as currently loading
        this.isDocSnapShotLoading = true;

        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    posts.push(x)
                })

                //set as completed loading.
                this.isDocSnapShotLoading = false;
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}

Answer 2

好的，所以我找到了一个暂时的解决方案，它现在可以工作但仍然不漂亮：

documentSnapshots.forEach(doc => {
          if (
            doc.id !== this.posts[0].docID &&
            doc.id !== this.posts[1].docID &&
            doc.id !== this.posts[2].docID
          ) {
            var post = doc.data()
            post.docID = doc.id
            this.$store.commit("modules/posts/pushPost", post)
          }
        })

我也尝试通过不同的解决方案来提高效率，感谢您的帮助。

Answer 3

如果您想忽略infiniteHandler 中的前3 个帖子，您可以创建一个帖子数组来存储帖子ID 并检查帖子ID 是否已经加载。我知道这应该使用查询来解决，但作为临时解决方案，我希望它对你有用。

infiniteHandler($state) {
    var next = db
        .collection("posts")
        .orderBy("timestamp", "desc")
        .startAfter(this.lastVisible)
        .limit(3)

    next.get().then(documentSnapshots => {
        //Get the last visible document
        // this.lastVisible =
        // documentSnapshots.docs[documentSnapshots.docs.length - 1]

        if (documentSnapshots.docs.length == 0) $state.complete()
        else {
            this.$store.commit(
                "modules/posts/updateLastVisible",
                documentSnapshots.docs[documentSnapshots.docs.length - 1].data()
                .timestamp
            )
        }

        documentSnapshots.forEach(doc => {
            var check = this.postIdArray.indexOf(doc.id);
            if(check == -1){
                var post = doc.data()
                post.docID = doc.id
                this.$store.commit("modules/posts/pushPost", post);
                this.postIdArray[] = doc.id;
            }
        })
        $state.loaded()
    })
}



async fetch({ store }){
    this.postIdArray = [];
    if (store.state.modules.posts.posts.length < 5) {
        let posts = []
        await db
            .collection("posts")
            .orderBy("timestamp", "desc")
            .limit(3)
            .get()
            .then(querySnapshot => {
                store.commit(
                    "modules/posts/updateLastVisible",
                    querySnapshot.docs[2].data().timestamp
                )
                querySnapshot.forEach(doc => {
                    var x = doc.data()
                    x.docID = doc.id
                    this.postIdArray[] = doc.id;
                    posts.push(x)
                })
            })
        store.commit("modules/posts/fetchedPosts", posts)
    }
}