React中遍历Azure Cosmos DB嵌套tickets节点并设置key的方法

核心结论 #

处理tickets子节点确实需要嵌套使用map()，同时可以通过对象键操作统计子节点数量，以下是具体实现方案：

1. 统计tickets子节点数量 #

由于tickets是键为1..n的对象（而非数组），可以通过Object.keys()获取所有子节点的键数组，再取数组长度得到数量：

const ticketCount = Object.keys(CosmoData.tickets).length;

2. 嵌套遍历tickets子节点 #

因为tickets是对象类型，无法直接调用map()，需要先提取键数组再遍历，同时为每个子组件设置唯一key（建议用子节点的编号或自身唯一ID）。

假设你的Cosmos DB返回的数据结构如下：

{
  "id": "order_001",
  "orderName": "客户订单A",
  "tickets": {
    "1": { "ticketId": "T001", "description": "登录异常" },
    "2": { "ticketId": "T002", "description": "支付失败" }
  }
}

对应的React组件实现示例：

function OrderCard({ CosmoData }) {
  const ticketCount = Object.keys(CosmoData.tickets).length;

  return (
    <div className="order-card">
      {/* 展示顶层数据 */}
      <h2>{CosmoData.orderName}</h2>
      <p>订单ID: {CosmoData.id}</p>
      <p>关联工单数量: {ticketCount}</p>

      {/* 嵌套遍历工单节点 */}
      <div className="ticket-list">
        {Object.keys(CosmoData.tickets).map(ticketNum => {
          const currentTicket = CosmoData.tickets[ticketNum];
          // 用ticketNum作为key，保证唯一性
          return (
            <div key={ticketNum} className="ticket-item">
              <h3>工单 {ticketNum}</h3>
              <p>工单ID: {currentTicket.ticketId}</p>
              <p>问题描述: {currentTicket.description}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

补充说明 #

• 如果后续Cosmos DB返回的tickets是数组类型（而非键值对对象），可以直接调用tickets.map()，此时key优先用工单自身的唯一标识（如ticketId），避免使用数组索引作为key（除非列表不会重新排序）。
• 确保每个子组件的key在当前列表中唯一，这是React渲染列表的性能优化要求，也是避免警告的必要操作。

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