如何对相同category的size数值求和并传递给组件？

我来帮你搞定这个计算同类别size总和并传给组件的需求～先看看你原代码里的问题：每次循环都把size重置为0，而且只加当前项的size，根本没法实现同类别size的累加，另外lastCategory也没初始化，容易出现逻辑bug。

咱们换个思路，先预先计算好每个category的size总和，再遍历数据渲染组件，这样逻辑更清晰也更高效：

步骤1：计算每个分类的总Size #

用reduce方法遍历数据，把每个category的size累加起来，存在一个对象里，键是category名称，值是对应总和：

const categorySizeSum = data.reduce((acc, item) => {
  // 如果当前分类还没在累加对象里，初始化为0，再加上当前项的size
  acc[item.category] = (acc[item.category] || 0) + item.size;
  return acc;
}, {});

执行完这段代码后，categorySizeSum会是这样的对象：

{
  "Keswick": 1180160,
  "HCOPA": 1090048,
  "Darhan Saluja": 493056,
  "CRSA": 267776,
  "Arundel": 401920
}

步骤2：遍历数据渲染组件 #

现在咱们可以安心遍历原数据，遇到新的category时，直接从categorySizeSum里取对应的总和传给ProductCategoryRow就好：

let rows = [];
let lastCategory = null; // 初始化lastCategory，避免首次判断出错

data.forEach((product, index) => {
  if (product.category !== lastCategory) {
    rows.push(<ProductCategoryRow 
      size={categorySizeSum[product.category]} 
      category={product.category} 
      key={product.category}
    />);
  }
  // 注意：原代码里用product.name当key，但你的数据里没有name字段，换成product.index更稳妥
  rows.push(<ProductRow 
    product={product} 
    key={product.index} 
    index={index}
  />);
  lastCategory = product.category;
});

完整代码整合 #

把上面的步骤整合起来就是完整的解决方案：

let data = [ 
  {size: 1180160, category: "Keswick", index: 1}, 
  {size: 1059328, category: "HCOPA", index: 2}, 
  {size: 30720, category: "HCOPA", index: 3}, 
  {size: 493056, category: "Darhan Saluja", index: 4}, 
  {size: 267776, category: "CRSA", index: 5}, 
  {size: 328704, category: "Arundel", index: 6}, 
  {size: 73216, category: "Arundel", index: 7} 
];

// 计算每个分类的总size
const categorySizeSum = data.reduce((acc, item) => {
  acc[item.category] = (acc[item.category] || 0) + item.size;
  return acc;
}, {});

let rows = [];
let lastCategory = null;

// 生成组件列表
data.forEach((product, index) => {
  if (product.category !== lastCategory) {
    rows.push(<ProductCategoryRow 
      size={categorySizeSum[product.category]} 
      category={product.category} 
      key={product.category}
    />);
  }
  rows.push(<ProductRow 
    product={product} 
    key={product.index} 
    index={index}
  />);
  lastCategory = product.category;
});

这个方案的好处是只需要遍历数据两次（一次计算总和，一次渲染），逻辑清晰，不会出现原代码里的累加错误，而且key的使用也更合理。

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