React+Firebase项目：如何过滤Firestore中Score后缀字段并求和？

你的代码主要有两个问题：一是过滤条件错误（当前判断的是键名等于Score，而非以Score结尾）；二是用map处理求和不合适，应该用reduce来直接累加数值。以下是修正后的完整实现：

步骤1：计算总分 #

先从Firestore返回的数据中过滤出目标字段，再累加分数值：

// 从datasets中提取并计算总分
const totalScore = Object.entries(datasets)
  // 过滤出键名以"Score"结尾的字段
  .filter(([key]) => key.endsWith('Score'))
  // 累加分数：将字符串转成数字，初始累加值为0
  .reduce((sum, [_, value]) => sum + Number(value), 0);

步骤2：在React组件中渲染总分 #

直接在组件的JSX中使用计算好的totalScore即可：

return (
  <h2>{totalScore}</h2>
);

额外说明（可选） #

如果Firestore返回的分数可能存在空值或非数字情况，可以加个兜底判断避免出现NaN：

const totalScore = Object.entries(datasets)
  .filter(([key]) => key.endsWith('Score'))
  .reduce((sum, [_, value]) => sum + (Number(value) || 0), 0);

内容的提问来源于stack exchange，提问作者David