React中如何遍历对象数组提取单个对象优化组件渲染

核心优化逻辑是将4次独立的数组遍历合并为1次遍历，每个小时的所有关联信息统一放在同一个容器节点下，原本的24个零散div直接减少到6个父容器+内部字段节点，结构和数据逻辑完全匹配，样式调整难度大幅降低。同时提前解构对象字段、简化冗余的天气数组遍历，提升代码可读性。

优化后代码 #

<div className="weather-info-extra">
  {shortedArr.map((hourItem, index) => {
    // 提前解构字段，简化后续调用
    const { dt, weather, temp, pop } = hourItem
    // 提前处理时间字符串
    const timeStr = new Date(dt * 1000).toLocaleTimeString([], {
      timeZone: timezone,
      hour: '2-digit',
      minute: '2-digit',
      hour12: true,
    })
    // 接口返回的weather固定为单元素数组，直接取第一个元素即可
    const weatherDesc = weather[0]?.description || ''
    return (
      // 每个小时对应一个独立容器，样式直接给这个容器配置即可
      <div key={dt} className="hourly-item">
        <div className="hour-time">{timeStr}</div>
        <div className="hour-weather">{weatherDesc}</div>
        <div className="hour-temp">{temp} C</div>
        <div className="hour-pop">
          <p>Rain</p>
          {pop}%
        </div>
      </div>
    )
  })}
</div>

配套样式示例（以横向排列6个小时卡片为例）：

.weather-info-extra {
  display: flex;
  gap: 16px;
  overflow-x: auto;
}
.hourly-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}

方案优势 #

1. 性能更好：数组仅遍历1次，比原来4次遍历减少了3次循环开销
2. 样式易维护：所有同一小时的字段都在同一个父容器下，无论是横向排列还是纵向排列，只需要调整父容器和.hourly-item的样式即可，不需要处理4组独立的DOM节点
3. 可读性更强：代码结构和数据逻辑一一对应，后续要加字段（比如体感温度、风速）只需要在.hourly-item内部加对应节点就行，不需要新增额外的数组遍历逻辑
4. 边界兼容：加了可选链?.处理极端情况下weather数组为空的情况，避免页面报错
5. 渲染更稳定：使用唯一的时间戳dt作为DOM key，避免数组顺序变化时的渲染异常

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