如何一次设置多个 onSnapshot() 侦听器

Question

我正在使用 react-native-firebase ^3.1.1 和 react-native ^0.49.5。我的应用程序的用户对区域具有可变权限。例如，用户 A 可能只有区域 1 的权限，而用户 B 可能有区域 1、2 和 3 的权限。当应用程序启动时，我设置了快照侦听器来侦听与区域对应的文档的更改用户有权访问。由于没有逻辑或，我必须为每个区域循环并设置一个如下所示的快照侦听器

componentDidMount() {
let { territories } = this.props
territories.forEach(territory => {
  this.unsubscribe.push(
    firebase
      .firestore()
      .collection('dispatches')
      .where('territory_id', '==', territory)
      .onSnapshot(querySnapshot => {
        const dispatches = []
        querySnapshot.forEach(document => {
          dispatches.push(document.data())
        })
        this.props.handleDispatchUpdate(territory, dispatches)
      })
  )
})
}

这似乎有效，但我的应用程序在设置侦听器时“冻结”。例如，如果用户尝试打开侧边抽屉菜单或以任何方式与应用程序交互，平均约 8 秒或有时长达一分钟以上没有任何反应，那么所有操作似乎都同时发生。

我添加了控制台日志语句来检查它是否是由于应用程序和 firebase 之间的网络时间造成的，如下所示

  componentDidMount() {
let { territories } = this.props
territories.forEach(territory => {
  console.log(`Starting read for territory item ${territories.indexOf(territory)}`, moment().format('hh:mm:ss'))
  this.unsubscribe.push(
    firebase
      .firestore()
      .collection('dispatches')
      .where('territory_id', '==', territory)
      .onSnapshot(querySnapshot => {
        console.log(`Finished read for territory item ${territories.indexOf(territory)}`, moment().format('hh:mm:ss'))
        const dispatches = []
        querySnapshot.forEach(document => {
          dispatches.push(document.data())
        })
        console.log(
          `Storing documents in redux store for territory item ${territories.indexOf(territory)}`,
          moment().format('hh:mm:ss')
        )
        this.props.handleDispatchUpdate(territory, dispatches)
      })
  )
})
}

结果如下记录为hh:mm:ss。相关用户有权访问 3 个地区

我不确定这是 react-native-firebase 包、firebase firestore 本身的问题还是我如何设置多个侦听器的问题。任何帮助表示赞赏。