React中如何从嵌套对象数组统计数值并新增属性

直接上解决方案，核心用map遍历数组，配合reduce做累加统计，同时保证不修改原数据（符合React的 immutable 原则）：

实现代码 #

const processData = (data) => {
  return data.map(item => {
    // 累加stats里的applicatiions和drafts总和
    const { applicatiions, drafts } = item.stats.reduce((total, current) => {
      return {
        applicatiions: total.applicatiions + current.applicatiions,
        drafts: total.drafts + current.drafts
      };
    }, { applicatiions: 0, drafts: 0 }); // 初始值设为0，兼容空数组情况

    // 组装新对象，保留原id、name，加上统计后的属性
    return {
      id: item.id,
      name: item.name,
      applicatiions,
      drafts
    };
  });
};

// 测试数据
const data = [ 
  { id:4, name:'sam',stats:[{id:1, partnerId:4, applicatiions:4, drafts:5},{id:2, partnerId:4, applicatiions:1, drafts:2}]},
  { id:5, name:'kam',stats:[{id:1, partnerId:5, applicatiions:2, drafts:3}]},
  { id:6, name:'jam',stats:[]},
  { id:7, name:'ram',stats:[{id:1, partnerId:7, applicatiions:9, drafts:5},{id:2, partnerId:7, applicatiions:2, drafts:5}]}
];

// 调用函数得到结果
const processedResult = processData(data);
console.log(processedResult);

代码说明 #

• map遍历原数组，每个元素返回全新对象，避免直接修改原数据（React开发中推荐保持数据不可变）
• reduce用来遍历每个对象的stats数组，从初始值{ applicatiions: 0, drafts: 0 }开始累加，即使stats是空数组，也能返回0而不是NaN
• 最后把原对象的id、name和统计出的两个属性组合成新对象，完全符合预期格式

注：注意到数据里的applicatiions是拼写错误（正确应为applications），如果是实际项目记得修正这个拼写问题。

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