React.js中如何合并重复商品数据仅显示一行（保留唯一序列号）

核心思路 #

先对商品数组按商品名称、价格、折扣等标识字段分组，将相同商品的序列号（Prod_SrNo）汇总到同一组中，再基于分组后的数据渲染账单行，避免重复显示相同商品。

具体实现步骤 #

1. 分组处理商品数据 #

在组件中添加分组逻辑，使用Array.reduce()将相同商品合并：

// 按商品核心信息分组，汇总序列号和数量
const groupedProducts = DataForPreview?.reduce((acc, item) => {
  // 用商品品牌、名称、价格、折扣组合成唯一分组标识
  const key = `${item.Product_Comp}-${item.Product}-${item.Price}-${item.Discount}`;
  
  if (!acc[key]) {
    // 初始化分组，复制商品基础信息，创建序列号数组和数量字段
    acc[key] = {
      ...item,
      prodSrNos: [item.Prod_SrNo],
      qty: 1
    };
  } else {
    // 已有分组，追加序列号并累加数量
    acc[key].prodSrNos.push(item.Prod_SrNo);
    acc[key].qty += 1;
  }
  
  return acc;
}, {});

// 将分组对象转为数组，方便渲染
const groupedProductsArray = Object.values(groupedProducts || {});

2. 修改渲染逻辑 #

用分组后的数组替代原数组渲染，在商品描述列展示所有汇总的序列号，并更新数量和金额计算：

<tr>
  <td style={{width:"1%"}}>Sr<br></br>No.</td>
  <td>Description Of Goods</td>
  <td>Qty</td>
  <td>Rate</td>
  <td>Disc %</td>
  <td>Amount</td>
</tr>

{/* 渲染分组后的商品行 */}
{groupedProductsArray && groupedProductsArray.map((data, idx) => (
  <tr key={idx}>
    <td>{idx + 1}.</td>
    <td>
      {data.Product_Comp} {data.Product}
      <br></br>
      {/* 遍历展示所有序列号，每个序列号换行 */}
      {data.prodSrNos.map((srNo, srIdx) => (
        <span key={srIdx}>{srNo}{srIdx !== data.prodSrNos.length - 1 ? <br></br> : ''}</span>
      ))}
    </td>
    <td>{data.qty}</td>
    <td>{data.Price}</td>
    <td>{data.Discount}</td>
    <td>
      {/* 按总数量计算折扣后金额 */}
      {(data.qty * (data.Price - (data.Price * data.Discount) / 100)).toFixed(2)}
    </td>
  </tr>
))}

关键说明 #

• 分组标识的字段可根据业务需求调整，确保能唯一区分不同商品即可；
• 数量（Qty）改为分组内商品的总个数，金额同步按总数量重新计算；
• 序列号通过遍历逐个展示，保持排版清晰。

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