React-Bootstrap Card如何正确渲染嵌套对象数组数据

卡片嵌套是两层重复包裹Card导致的：

• 你在completeCardData方法中遍历每一行数据时，先给整行内容套了一层外层Card
• 之后调用getData遍历行内每个cell时，又给单个cell内容套了一层内层Card
  最终渲染出来的结构就是「行级外层Card嵌套多个cell级内层Card」，和你预期的「每个cell单独对应一张独立Card、无嵌套」的效果不符。
  另外你原代码里用Object.values(rest)[2]/Object.values(rest)[3]的方式取值存在隐患，完全依赖对象属性的书写顺序，一旦后续调整对象字段顺序就会取错值。

直接打平所有行的cell数据，移除多余的行级Card包裹，每个cell单独渲染一张Card即可，修正后的代码如下：

import { Card } from 'react-bootstrap';

const Table = ({ mockData }) => {
  // 把所有行的cell合并为一维数组，每个元素对应一张独立卡片
  const allCells = mockData.flatMap(row => row.cells);

  return (
    <div>
      {allCells.map((cell) => {
        // 直接通过明确属性名取值，不依赖属性顺序
        const label = cell.headerName;
        let cellData = '';
        switch (label) {
          case 'Name':
            cellData = cell.CustomerName;
            break;
          case 'RegID':
            cellData = cell.CustomerID;
            break;
          case 'Detail':
            // 注意：当前mockData里该字段拼写错误（写为Deatil），后续建议修正字段命名
            cellData = cell.Deatil;
            break;
          default:
            cellData = '-';
        }

        return (
          <Card key={cell.key} className="mb-2">
            <Card.Body>
              <span><b>{label}：</b></span>
              <span>{cellData}</span>
            </Card.Body>
          </Card>
        );
      })}
    </div>
  );
};

• 渲染列表项时必须传入唯一的key属性，原代码未给Card组件传key，会触发React的渲染警告
• 尽量避免通过Object.values()按下标取对象属性，业务迭代中对象字段顺序很容易变动，会引发隐蔽的取值错误
• 建议修正mockData里Detail字段的拼写错误，统一字段命名规范减少后续bug

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