如何在react引导卡中填充嵌套的对象数据数组

Question

我试图在react引导卡中呈现json数据，我有一个由包含在其中的对象数据数组组成的mockdata。我已经以卡格式呈现数据，但问题是，我需要一个单元的数据在一张卡和另一个单元的数据在下一张卡。但是所有的数据都是以个人卡呈现的。如果我做错了，任何人都可以帮助我，我已经编写了mockData和下面的代码。非常感谢。

const Table = ({ mockData }) => {
  function getData(cells) {
    return cells.map((cell) => {
      const { ...rest } = cell;
      console.log({ ...rest });

      const label = Object.values(rest)[2];

      const data = Object.values(rest)[3];

      console.log(data);
      return (
        <Card>
          <Card.Body>
            <span>
              <b>{label}</b>
            </span>
            <span> {data}</span>{" "}
          </Card.Body>
        </Card>
      );
    });
  }
  function completeCardData(mockData) {
    return mockData.map((row) => {
      return (
        <Card>
          <Card.Body>{getData(row.cells)}</Card.Body>
        </Card>
      );
    });
  }

  return <div>{completeCardData(mockData)}</div>;
};

//模拟数据

[
  {
    "key": "row-0",

    "cells": [
      {
        "key": "cell-0",
        "id": "ID-0",
        "headerName": "Name",
        "CustomerName": "ABC"
      },

      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "RegID",
        "CustomerID": "P-01"
      },

      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "Detail",
        "Deatil": "Abc"
      }
    ]
  },

  {
    "key": "row-1",

    "cells": [
      {
        "key": "cell-1",
        "id": "ID-1",
        "headerName": "Name",
        "CustomerName": "CDE"
      },

      {
        "key": "cell-2",
        "id": "ID-2",
        "headerName": "RegID",
        "CustomerID": "P-02"
      },

      {
        "key": "cell-3",
        "id": "ID-3",
        "headerName": "Detail",
        "Deatil": "CDE"
      }
    ]
  }
]

Answer 1

一个密码箱会有帮助，但如果我正确理解，你需要这样的东西

  function getData(cell) {
      return (
        <Card>
          <Card.Body>
            <span>
              <b>{cell.headerName}</b>
            </span>
            <span> {cell.CustomerName}</span>{" "}
          </Card.Body>
        </Card>
      );
  }

  function completeCardData(mockData) {
    return mockData.map((row) => {
      return row.cells.map(cell => getData(cell))
    });
  }

现在，您创建了一个Card，并将所有的东西都放在里面。您需要它为每个cell创建一个新的Card及其内容。