如何统计React中Firestore返回数据按date和prodID分组的出现次数？

原有代码存在两个核心问题：

• 重复发起Firestore查询，先查所有prodID再逐个prodID查数据，既浪费请求资源，也容易因为异步时序问题导致数据异常
• 分组统计逻辑错误：你是按文档索引遍历往arr2里塞数据，并没有按照date+prodID的唯一键做分组计数，而是给所有匹配prodID的项都加计数，自然得不到正确结果

方案1：直接从Firestore拉取数据时就处理为目标格式（推荐） #

一次性拉取所有商品数据，直接在本地做分组统计，不需要多次请求：

firebase
  .firestore()
  .collection("batch")
  .doc(ctx.currentUser.companyName)
  .collection("products")
  .orderBy("dateAdded", "desc")
  .get()
  .then((snapshot) => {
    // 用来临时存储分组计数的对象，key是`date|prodID`格式的唯一标识
    const countMap = {}
    snapshot.forEach(doc => {
      const data = doc.data()
      const date = getDate(data.dateAdded.seconds)
      const prodID = data.prodID
      // 生成唯一分组key
      const key = `${date}|${prodID}`
      // 计数累加
      if (!countMap[key]) {
        countMap[key] = { count: 1, date, prodID }
      } else {
        countMap[key].count += 1
      }
    })
    // 把map转成你要的数组格式
    const result = Object.values(countMap)
    // 这里直接使用result即可，不需要再存入summary数组二次转换
    console.log(result)
  })

方案2：如果已经拿到现有summary数组，直接转换为目标格式 #

如果你的summary数组已经是你贴出的结构，不需要再查询Firestore，直接用下面的代码转换即可：

const countMap = {}
// 遍历所有summary项
summary.forEach(item => {
  // 遍历每个item里的data数组
  item.data.forEach(record => {
    const { date, prodID } = record
    const key = `${date}|${prodID}`
    if (!countMap[key]) {
      countMap[key] = { count: 1, date, prodID }
    } else {
      countMap[key].count += 1
    }
  })
})
const result = Object.values(countMap)
// result就是你要的输出格式
console.log(result)

注：你给出的预期输出里Sep 19 2019属于笔误，实际转换后会是原始数据里的Sep 19 2021。

内容的提问来源于stack exchange，提问作者Chan Wei Jie