React.js中使用map方法将同组对象渲染到同一表格行

当前代码双层map的返回层级错了：内层遍历单个商品时直接返回<tr>标签，导致组内有多少个商品就会生成多少个独立表格行，自然出现每个商品单独占一行的效果。

把<tr>的生成逻辑移到外层商品组的遍历层级，内层遍历仅负责在同一个单元格内渲染组内所有商品内容，同时补全第二列的组总价计算即可，替换原有tbody部分代码：

<tbody>
  {cardItems.map((groupItems, groupIdx) => {
    // 计算当前分组的商品总金额
    const groupTotalPrice = groupItems.reduce((total, currentItem) => total + currentItem.totalPrice, 0)
    return (
      <tr key={groupIdx}>
        <td>
          {groupItems.map((item, itemIdx) => (
            <div key={itemIdx} style={{ marginBottom: itemIdx !== groupItems.length - 1 ? '8px' : 0 }}>
              <b>Item:</b> {item.title}, <b>Item Price:</b> {item.price},{' '}
              <b>Item Count:</b> {item.count}, <b>Item Total Price:</b> {item.totalPrice}
            </div>
          ))}
        </td>
        <td>{groupTotalPrice}</td>
      </tr>
    )
  })}
</tbody>

• 外层遍历二维数组的每个内层商品组时，每组仅生成1个<tr>表格行，保证同组商品在同一行
• 内层遍历组内商品时，仅在第一列的<td>单元格内渲染商品详情，同组多个商品用div做块级分隔，不会拆分成新行
• 自动计算每组商品的合计总价，填充到表头对应的Total Items Price列
• 补充了循环渲染所需的key属性，符合React渲染规范，避免控制台告警

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