在 React Native 中添加新消息时，Firestore 侦听器从分页中删除消息答案

【问题标题】：Firestore listener removes a message from pagination when adding a new message in React Native在 React Native 中添加新消息时，Firestore 侦听器从分页中删除消息
【发布时间】：2021-10-07 00:32:13
【问题描述】：

我正在尝试进行 Firestore 反应式分页。我知道有帖子、cmets 和文章说这是不可能的，但无论如何......

当我添加新消息时，它会启动或“删除”上一条消息

这是主要代码。我一次分页 4 条消息

async getPaginatedRTLData(queryParams: TQueryParams, onChange: Function){
  let collectionReference = collection(firestore, queryParams.pathToDataInCollection);
  let collectionReferenceQuery = this.modifyQueryByOperations(collectionReference, queryParams);

//Turn query into snapshot to track changes 
const unsubscribe = onSnapshot(collectionReferenceQuery, (snapshot: QuerySnapshot) => {

  snapshot.docChanges().forEach((change: DocumentChange<DocumentData>) => {
    //Now save data to format later
    let formattedData = this.storeData(change, queryParams)
         
    onChange(formattedData);
  })
})

this.unsubscriptions.push(unsubscribe)
}

为了完整起见，这就是我构建查询的方式

let queryParams: TQueryParams = {
  limitResultCount: 4,
  uniqueKey: '_id',
  pathToDataInCollection: messagePath,
  orderBy: {
    docField: orderByKey,
    direction: orderBy
  }
}    

  modifyQueryByOperations( 
collectionReference: CollectionReference<DocumentData> = this.collectionReference,
queryParams: TQueryParams) {
//Extract query params
let { orderBy, where: where_param, limitResultCount = PAGINATE} = queryParams;
let queryCall: Query<DocumentData> = collectionReference;

if(where_param) {
  let {searchByField, whereFilterOp, valueToMatch} = where_param;
  //collectionReferenceQuery = collectionReference.where(searchByField, whereFilterOp, valueToMatch)
  queryCall = query(queryCall, where(searchByField, whereFilterOp, valueToMatch) )
}

if(orderBy) {
  let { docField, direction} = orderBy;
  //collectionReferenceQuery = collectionReference.orderBy(docField, direction)
  queryCall = query(queryCall, fs_orderBy(docField, direction) )
}

if(limitResultCount) {
  //collectionReferenceQuery = collectionReference.limit(limitResultCount)
  queryCall = query(queryCall, limit(limitResultCount) );
}

if(this.lastDocInSortedOrder) {
  //collectionReferenceQuery = collectionReference.startAt(this.lastDocInSortedOrder)
  queryCall = query(queryCall, startAt(this.lastDocInSortedOrder) )
}

return queryCall
}

当我向集合中添加新消息时，请参阅删除的最后一行。更糟糕的是它并不一致。我对此进行了调试，Firestore 正在删除该消息。

我几乎觉得这是 Firestore 处理侦听器的一个错误

【问题讨论】：

文档是从 Firestore 中删除还是仍然存在？当侦听器仍处于活动状态时，您在查询中搜索的字段的值可能会发生变化，这会使侦听器将此文档视为已删除的文档，如this answer 中所述。如果不是这种情况，您能否也分享您设置新文档的功能？
我认为这就是正在发生的事情。结果被从查询中删除，但不是后端。我实际上已经弄清楚了这一切并且现在查询它要好得多，因为我创建了一个类并将旧的分页数据与新的实时传入数据分开

标签： javascript firebase react-native google-cloud-firestore expo

【解决方案1】：

正如 cmets 中所述并经您确认，您所面临的问题正在发生，因为您在查询中搜索的字段的某些值在侦听器仍处于活动状态时发生了更改，这使侦听器想到此文档已被删除。

事实证明，记录并未从 Firestore 本身中删除，而只是从侦听器中排除。

这可以通过创建更好的查询结构来解决，将旧数据与从侦听器传入的新数据分开，您提到您已经在 cmets 中完成了这一点。

【讨论】：