React表格渲染含数组字段对象时如何拆分单元格展示数组内容

数组类型字段直接放在<td>中渲染时，React会默认把数组元素转成拼接字符串，导致展示不符合预期，可根据实际展示需求选择以下方案：

• 方案1（推荐）：拆分多行+公共单元格合并：同订单的固定信息（订单号、收件人等）只展示一次、跨多行合并，数组字段每个元素单独占一行，符合电商订单类表格的常规展示逻辑
• 方案2：拆分多行不合并：实现逻辑更简单，同订单固定信息在每一行重复展示，适合对排版紧凑度要求不高的场景
• 方案3：单单元格内换行：不改变表格原有行数，数组元素在同一个单元格内逐行展示，适合数组长度普遍较短的场景

方案1具体实现（拆分+合并单元格） #

1. 数据预处理拍平结构 #

核心逻辑是遍历每条订单数据，计算当前订单下所有数组字段的最大长度，按这个长度生成对应数量的表格行，非数组字段在同订单的所有行中填充相同值，数组字段按索引取对应位置的元素，同时标记订单首行和需要合并的行数：

const getFlattenTableRows = (orderList) => {
  const tableRows = [];
  // 配置需要拆分的数组字段名
  const splitFields = ['Quantity', 'Product_Name', 'SKU'];

  orderList.forEach(order => {
    // 计算当前订单需要拆分出的行数，取所有数组字段的最大长度
    const rowCount = Math.max(
      ...splitFields.map(field => Array.isArray(order[field]) ? order[field].length : 1)
    );

    // 逐行生成拍平后的数据
    for (let i = 0; i < rowCount; i++) {
      const currentRow = { ...order };
      splitFields.forEach(field => {
        currentRow[field] = Array.isArray(order[field]) 
          ? (order[field][i] ?? '') 
          : order[field];
      });
      // 标记合并单元格需要的参数
      currentRow.isFirstLine = i === 0;
      currentRow.spanCount = rowCount;
      tableRows.push(currentRow);
    }
  });

  return tableRows;
};

2. 父组件改造 #

原来直接遍历原始订单传参的逻辑，改成先调用预处理方法生成拍平的行数据，再遍历渲染：

// 原始数据注意取Orders字段
const flattenRows = getFlattenTableRows(itemsToSend.Orders);

return (
  <table border="1" cellPadding="4">
    <thead>
      <tr>
        <th>订单号</th>
        <th>收件人</th>
        <th>SKU</th>
        <th>联系电话</th>
        <th>收货地址</th>
        <th>省份</th>
        <th>邮编</th>
        <th>购买数量</th>
      </tr>
    </thead>
    <tbody>
      {flattenRows.map((row, index) => (
        <Posreturn key={`${row._id.$oid}-${index}`} post={row} />
      ))}
    </tbody>
  </table>
);

注意：key建议用订单唯一id拼接行索引生成，不要单独用数组索引，避免数据更新时渲染错位。

3. Posreturn子组件改造 #

非数组的公共字段只在订单首行渲染，通过rowSpan属性设置跨N行合并，拆分后的数组字段每行单独渲染：

const Posreturn = ({ post }) => {
  return (
    <tr>
      {/* 公共字段仅首行渲染，设置跨行列 */}
      {post.isFirstLine && (
        <>
          <td rowSpan={post.spanCount}>{post.OrderNumber}</td>
          <td rowSpan={post.spanCount}>{post.Name}</td>
          <td rowSpan={post.spanCount}>{post.Phone}</td>
          <td rowSpan={post.spanCount}>{post.Address}</td>
          <td rowSpan={post.spanCount}>{post.Province}</td>
          <td rowSpan={post.spanCount}>{post.ZipCode}</td>
        </>
      )}
      {/* 拆分后的数组字段逐行渲染 */}
      <td>{post.SKU}</td>
      <td>{post.Quantity}</td>
    </tr>
  );
};

方案2具体实现（拆分不合并） #

不需要做单元格合并的话，预处理逻辑可以去掉isFirstLine和spanCount的标记，子组件保持原来的结构，直接渲染所有字段即可，同订单的公共信息会在每一行重复展示。

方案3具体实现（单单元格内换行） #

不想拆分表格行的话，直接修改单元格渲染逻辑，遍历数组在单元格内逐行展示元素即可，不需要改动数据结构和遍历逻辑：

// 以SKU字段为例，其他数组字段同理
<td>
  {Array.isArray(post.SKU) 
    ? post.SKU.map((skuItem, idx) => <div key={idx}>{skuItem}</div>)
    : post.SKU
  }
</td>

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