React-Table中TD内容横向堆叠问题：如何让每个mId单独成行？

要让每个sku的mId单独占据一行<tr>（对应独立的<td>），核心是先将原始的嵌套数据扁平化，再传给react-table渲染。

步骤1：扁平化原始数据 #

假设你的原始数据结构类似这样：

const originalData = [
  {
    id: 'row1',
    // 其他字段...
    skus: [{ mId: 'm001' }, { mId: 'm002' }]
  },
  {
    id: 'row2',
    // 其他字段...
    skus: [{ mId: 'm003' }]
  }
];

使用flatMap将每个包含多个sku的行拆分为多行，每行对应一个sku，同时保留原行的其他字段：

const flattenedData = originalData.flatMap(row => 
  row.skus.map(sku => ({
    ...row, // 保留原行的所有字段
    mId: sku.mId // 提取当前sku的mId作为单独字段
  }))
);

扁平化后的数据会变成：

[
  { id: 'row1', /*其他字段*/, mId: 'm001' },
  { id: 'row1', /*其他字段*/, mId: 'm002' },
  { id: 'row2', /*其他字段*/, mId: 'm003' }
]

步骤2：修改COLUMNS配置 #

直接使用扁平化后的mId字段作为accessor，无需再处理数组：

export const COLUMNS = [
  {
    Header: 'mId',
    accessor: 'mId'
  }
];

备选方案（单元格内多行显示，非独立表格行） #

如果不需要拆分表格行，只是想在同一个<td>内让每个mId单独换行显示，可以通过Cell自定义渲染：

export const COLUMNS = [
  {
    Header: 'mId',
    accessor: 'skus',
    Cell: ({ value }) => (
      <div style={{ whiteSpace: 'pre-line' }}>
        {value.map(sku => sku.mId).join('\n')}
      </div>
      // 或者逐个渲染元素：
      // <div>
      //   {value.map((sku, idx) => (
      //     <div key={idx}>{sku.mId}</div>
      //   ))}
      // </div>
    )
  }
];

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