如何基于meeting与room对象数组正确渲染Card3组件？

问题原因 #

你当前的嵌套遍历逻辑是每个room元素对应遍历所有meeting元素，最终渲染的Card3数量等于 room.length × meeting.length，这就是重复渲染的核心原因。要解决这个问题，关键是明确meeting和room两个数组的关联关系，再按对应关系匹配渲染。

解决方案 #

根据两种常见的关联场景，给出对应实现：

场景1：两个数组按索引一一对应 #

如果meeting[i]和room[i]是一一对应的关系（比如第1个团队对应第1个会议室），直接遍历其中一个数组，通过索引获取另一个数组的对应元素：

<div className="topCards">
  {meeting.map((meetObject, index) => {
    // 避免数组长度不一致导致报错
    const dataObj = room[index];
    if (!dataObj) return null;
    
    return (
      <div className="item" key={`team-${meetObject.id}-room-${dataObj.id}`}>
        <Card3
          className="card3"
          teamName={meetObject.name}
          roomName={dataObj.name}
          time={dataObj.time}
          data={dataObj.data}
          capacity={dataObj.capacity}
        />
      </div>
    );
  })}
</div>

场景2：两个数组通过唯一字段关联 #

如果meeting和room通过某个共同字段关联（比如meeting里的roomId对应room的id），先把room转成映射对象，再遍历meeting匹配对应会议室：

// 提前将room数组转为以id为键的映射，提升查找效率
const roomMap = room.reduce((acc, roomItem) => {
  acc[roomItem.id] = roomItem;
  return acc;
}, {});

<div className="topCards">
  {meeting.map((meetObject) => {
    // 根据关联字段找到对应会议室
    const dataObj = roomMap[meetObject.roomId];
    // 找不到对应会议室时跳过渲染
    if (!dataObj) return null;
    
    return (
      <div className="item" key={`team-${meetObject.id}-room-${dataObj.id}`}>
        <Card3
          className="card3"
          teamName={meetObject.name}
          roomName={dataObj.name}
          time={dataObj.time}
          data={dataObj.data}
          capacity={dataObj.capacity}
        />
      </div>
    );
  })}
</div>

注意事项 #

• 必须给每个循环生成的元素设置唯一的key属性，建议使用数据的唯一标识（比如id）拼接，不要直接用数组索引，避免数组重排时出现渲染异常。
• 添加dataObj存在性判断，防止数组长度不一致或关联字段不匹配导致的报错。

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