我已经构建了一个React组件，它从Azure Cosmos数据库（JSON对象）获取数据，并在Web应用程序中以类似卡片的结构显示这些数据。
JSON包含几个顶级键/值对，然后是一个'tickets'节点，它可以包含数量可变的子节点，编号为1..n，其中几个键/值对作为子节点，请参见下面的简化示例：

{
    "id": "541f6100-ab47-48ed-a415-92a509c4b9bd",
    "tickets": {
        "1": {
            "ticketID": "d10400e3-ccea-4592-aef1-19005f9c91d8"
        },
        "2": {
            "ticketID": "05a7e6d4-a4ff-4402-bb42-52fdc7dbf72b"
        },
        "3": {
            "ticketID": "e7e332f2-be7b-47b8-a864-2244d720a12e"
        }
    }
}

我的React组件大致结构如下（为了可读性而简化）：

const Cards = ({ CosmoData }) => {
  return (
    <div>
      {CosmoData.map((card) => (
        <div>
          <div key={card.id}>
            <div>
              <div>
                <table>
                  <tbody>
                    <tr key={card.tickets}>
                      <td>2</td>
                      <td>3</td>
                      <td>4</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

数据由服务器组件馈送到客户端组件，如下：

export default async function Page() {
  // Fetch data directly in a Server Component
  const CosmoData = await getCards();

  // Forward fetched data to your Client Component
  return <Cards CosmoData={CosmoData} />;
};

因此CosmoData.map（）方法使顶级键/值对可访问。但是，我似乎找不到如何使用子节点，特别是计算子节点的数量，以便索引可以用于键属性。
我应该以某种方式嵌套.map方法吗？