React JS如何将JSON数据正确展示在React Bootstrap卡片中

核心错误是Card组件的放置层级写反了，最终导致每个字段单独渲染为独立卡片：

• 你在遍历单个字段（cell）的getData方法中，给每一个字段都包裹了独立的<Card>组件，等于每个字段自身就生成了一张卡片
• 外层遍历整行数据的completeCardData虽然也包裹了Card，但内层已经提前生成了独立卡片，最终渲染结果就不符合预期
  除此之外现有代码还有两个易出问题的点：
• 用Object.values(rest)[索引]的方式取标签和值非常脆弱，只要对象属性顺序变动就会取错内容
• mock数据中Detail字段存在拼写错误，写为了Deatil，直接按属性名取值会获取不到对应内容

import React from "react";
import Card from "react-bootstrap/Card";
const Table = ({ mockData }) => {
  // 仅渲染单条卡片内的字段内容，不再单独包裹Card组件
  function renderCellContent(cells) {
    return cells.map((cell) => {
      const { key, headerName, ...restProps } = cell;
      // 动态取业务字段值，兼容mock里的拼写错误
      const fieldValue = Object.values(restProps).find(val => typeof val === 'string');
      return (
        <div key={key} className="mb-2">
          <b>{headerName}：</b>
          <span>{fieldValue}</span>
        </div>
      );
    });
  }

  // 每一条完整数据对应一张独立卡片
  function renderAllCards(dataList) {
    return dataList.map((row) => (
      <Card key={row.key} className="mb-3">
        <Card.Body>
          {renderCellContent(row.cells)}
        </Card.Body>
      </Card>
    ));
  }

  return <div className="p-3">{renderAllCards(mockData)}</div>;
};

export default Table;

• 建议修正mock数据里的拼写错误，将Deatil改为Detail，后续可以直接根据headerName做字段映射，不用动态遍历对象属性取值
• 所有列表遍历项都要给最外层元素加唯一key属性，避免React渲染告警和状态异常问题
• 可以给卡片、字段项加适当的margin类名（比如示例中的mb-3、mb-2），避免内容挤在一起影响可读性

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