如何在JSX中遍历非同一数组或对象的分散数据？

算力阿峰

2026-5-21

解决JSX中遍历分散关联数据的问题

嘿，这个场景太常见了——当数据来自不同来源但需要统一渲染成相似布局时，核心思路就是先把分散的数据整合为一个可遍历的结构，然后用React的map()方法批量生成JSX元素，不用重复写三遍几乎一样的代码。

具体步骤如下：

1. 把分散的数据打包成统一数组

首先，我们可以把每个字段的「标签」和「对应值」打包成对象，放进一个数组里。如果像Hobbies这种是数组类型的数据，先转成逗号分隔的字符串：

// 假设你的分散数据是这些（来自不同来源）
const userName = "Alice Smith";
const userID = "U-98765";
const hobbies = ["reading sci-fi", "hiking", "playing guitar"];

// 整合成可遍历的数组
const userInfoFields = [
  { label: "User Name", value: userName },
  { label: "User ID", value: userID },
  { label: "Hobbies", value: hobbies.join(", ") } // 把数组转成逗号分隔字符串
];

2. 在JSX中遍历渲染

接下来用map()遍历这个数组，生成对应的<div>元素。注意要给每个遍历项加唯一的key（这里用item.label或者index都可以，因为标签是唯一的）：

return (
  <div className="user-profile">
    {userInfoFields.map((item) => (
      <div key={item.label} className="profile-item">
        <strong>{item.label}: </strong>
        {item.value}
      </div>
    ))}
  </div>
);

3. 额外优化：处理空值情况

如果某个字段可能为空（比如用户没填爱好），可以加个默认值避免页面显示空白：

{userInfoFields.map((item) => (
  <div key={item.label} className="profile-item">
    <strong>{item.label}: </strong>
    {item.value || "N/A"} {/* 为空时显示"N/A" */}
  </div>
))}