Question

我正尝试从最新消息到最旧消息（从下到上）分页。我的查询有效，但是在查询新消息后，它将以错误的顺序追加数组。我确实关注了this条文章。这是我的逻辑：

//Global variables
let start = null
let end = null

collectionRef
      .orderBy('createTimestamp', 'desc')
      .limit(10)
      .get()
      .then(snapshot => {
        start = snapshot.docs[snapshot.docs.length - 1]
        if (start) {
          const listener = collectionRef
            .orderBy('createTimestamp')
            .startAt(start)
            .onSnapshot(messages => {
              messages.docChanges().forEach(change => {
                const message = this.convertObjectTimestampPropertiesToDate({
                  id: change.doc.id,
                  ...change.doc.data()
                })
                if (change.type === 'added') {
                  store.commit('chats/addMessage', message)
                }
              })
            })
          store.commit('chats/setObserver', listener)
        }
      })

如果我在消息列表的顶部，那么我将启动此功能（这是我的消息顺序出错的部分。它将最大的时间戳项向上移动，将较小的时间戳项向下移动，这是错误的。）：

async getMoreMessages() {
    collectionRef
          .orderBy('createTimestamp', 'desc')
          .startAt(start)
          .limit(10)
          .get()
          .then(snapshot => {
            end = start
            start = snapshot.docs[snapshot.docs.length - 1]
            const listener = collectionRef
              .orderBy('createTimestamp')
              .startAt(start)
              .endBefore(end)
              .onSnapshot(messages => {
                messages.forEach(message => {
                  const mappedMessage = this.convertObjectTimestampPropertiesToDate(
                    {
                      id: message.id,
                      ...message.data()
                    }
                  )
                  store.commit('chats/addMessage', mappedMessage)
                })
              })
            store.commit('chats/setObserver', listener)
          })
       }

我的Vuex变异将消息添加到阵列：

addMessage: (state, message) => {
    const exists = state.messages.find(m => {
      return m.id === message.id
    })
    if (!exists) {
      state.messages.push(message)
    }
},

以下是可视化情况：

这是运行getMoreMessages()后时间戳的控制台日志：

    TEXT 9 TIMESTAMP Wed Sep 25 2019 16:14:09 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 10 TIMESTAMP Wed Sep 25 2019 16:14:10 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 11 TIMESTAMP Wed Sep 25 2019 16:14:11 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 12 TIMESTAMP Wed Sep 25 2019 16:14:12 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 13 TIMESTAMP Wed Sep 25 2019 16:14:13 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 14 TIMESTAMP Wed Sep 25 2019 16:14:14 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 15 TIMESTAMP Wed Sep 25 2019 16:14:15 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 16 TIMESTAMP Wed Sep 25 2019 16:14:16 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 17 TIMESTAMP Wed Sep 25 2019 16:14:18 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 18 TIMESTAMP Wed Sep 25 2019 16:14:19 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 1 TIMESTAMP Wed Sep 25 2019 16:13:24 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 2 TIMESTAMP Wed Sep 25 2019 16:13:43 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 3 TIMESTAMP Wed Sep 25 2019 16:13:50 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 4 TIMESTAMP Wed Sep 25 2019 16:14:05 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 5 TIMESTAMP Wed Sep 25 2019 16:14:06 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 6 TIMESTAMP Wed Sep 25 2019 16:14:07 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 7 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)
chats.mutations.js?7021:29 TEXT 8 TIMESTAMP Wed Sep 25 2019 16:14:08 GMT+0300 (Eastern European Summer Time)

我不明白我在做什么错。看起来查询工作正常，但附加逻辑失败。我尝试执行unshift()而不是.push()并在前端按时间戳排序，但顺序也有误。任何帮助深表感谢！

Answer 1

您是否在订单中缺少'desc'？默认情况下，Firestore将使用asc，但在您的第一个电话中，您看到的是您指定的desc。

Firestore分页以错误的顺序附加数组

1 个答案: