如何使用 Cloud Firestore 进行分页？

Question

当我点击 react-native 中的加载更多消息按钮时，我需要从 Cloud Firestore 获得 50 多条文档消息。

下面是我的代码，当我打开我的应用程序时会收到 50 个文档，但不是所有消息。

getMessagesFrom(usr){
    return db.collection("ppl/" + usr + "/messages/").orderBy("createdAt", "desc").limit(50).get().then(snapshot => {
        this.docs = snapshot.docs;
        let l = this.docs.length;
        for (let i = 0; i < l; i++) {
            this.dblid = this.state.myId + usr;
            if (this.msgObj[this.dblid] === undefined) {
                this.msgObj[this.dblid] = [this.docs[i].data()];
            } else {
                this.msgObj[this.dblid] = [...this.msgObj[this.dblid], this.docs[i].data()]
            }
            if (i === l - 1) {
                return this.msgObj;
            }
        }
        return false;
    });
}

我的期望是通过单击更多消息按钮获得更多 50 个文档。

Answer 1

来自文档：

使用 startAt() 或 startAfter() 方法定义查询的起点。 startAt() 方法包括起点，而 startAfter() 方法不包括起点。

对于管理页面，您可以创建状态来存储您的页码，并在每次获取数据时增加它

const pageSize = 50;     // your page size
state = { pageNum: 0 };  // your page number

getMessagesFrom(usr){
    return db.collection("ppl/" + usr + "/messages/")
      .orderBy("createdAt", "desc")
      .startAt(this.state.pageNum * pageSize) // here we set start point
      .limit(pageSize)
      .get().then(snapshot => {

          this.setState({ pageNum: pageNum+1 });

          ...your code

    });
}