React嵌套Map显示重复内容的原因及空电话移除方案

问题场景 #

在嵌套使用map渲染用户电话信息时，出现重复内容，并且会展示为空的家庭电话（home phone）与办公电话（office phone），代码及效果如下：

原代码 #

import "./styles.css";
const data = [
  {
    firstname: "junaid",
    lastname: "hossain",
    phones: [{ home: "015000" }, { office: "0177" }]
  },
  {
    firstname: "arman",
    lastname: "hossain",
    phones: [{ home: "013000" }, { office: "0187" }]
  }
];

export default function App() {
  return (
    <div className="App">
      <div className="users">
        {data.map((user, index) => {
          const { firstname, lastname } = user;
          return (
              <div key={index} className="user">
                <p>
                  name: {firstname} {lastname}
                </p>
                {user.phones.map((phone, i) => (
                  <div>
                    <p>home phone:{phone.home}</p>
                    <p>office phone:{phone.office}</p>
                  </div>
                ))}
              </div>
            );
        })}
      </div>
    </div>
  );
}

问题效果 #

问题成因 #

1. 数据结构与渲染逻辑不匹配：每个用户的phones数组是两个独立对象，分别只包含home或office字段。嵌套map遍历phones时，每遍历一个对象就会渲染一组home和office标签——第一个对象只有home值，office字段不存在就显示为空；第二个对象只有office值，home字段不存在显示为空，最终出现重复的两组标签+空内容。
2. 无字段存在性判断：直接渲染phone.home和phone.office，没有判断字段是否存在或有值，导致空值直接显示在页面上。

解决方法 #

方法1：修改渲染逻辑，按需渲染字段 #

不用调整数据结构，只在渲染时判断字段是否存在，存在才渲染对应标签：

{user.phones.map((phone, i) => (
  <div key={i}>
    {/* 只有home字段存在时才渲染 */}
    {phone.home && <p>home phone:{phone.home}</p>}
    {/* 只有office字段存在时才渲染 */}
    {phone.office && <p>office phone:{phone.office}</p>}
  </div>
))}

这种方法会保留两个div，但不会显示空内容。

方法2：调整数据结构（推荐） #

将phones从数组改成单个对象，让一个对象包含所有电话字段，这样无需嵌套map，直接渲染即可：

修改后的数据

const data = [
  {
    firstname: "junaid",
    lastname: "hossain",
    phones: { home: "015000", office: "0177" }
  },
  {
    firstname: "arman",
    lastname: "hossain",
    phones: { home: "013000", office: "0187" }
  }
];

修改后的渲染代码

<div className="user">
  <p>
    name: {firstname} {lastname}
  </p>
  <div>
    {user.phones.home && <p>home phone:{user.phones.home}</p>}
    {user.phones.office && <p>office phone:{user.phones.office}</p>}
  </div>
</div>

这种方法既解决了重复渲染问题，也避免了空内容，结构更合理。

额外提醒 #

尽量不要用index作为key，如果用户数据有唯一标识（比如id），优先使用唯一标识作为key，避免后续数据变动时出现渲染异常。

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