如何在数组嵌套nested maps时避免key prop警告？

问题背景 #

你有如下结构的数组数据：

const arr = [
  {
    title: "title1",
    content: [
      {
        id: "home",
        name: "Home",
      },
      {
        id: "services",
        name: "services",
      },
      {
        id: "Appointments",
        name: "Appointments",
      },
    ],
  },
  {
    title: "title2",
    content: [
      {
        id: "about us",
        name: "about us",
      },
      {
        id: "contact",
        name: "contact",
      },
      {
        id: "blog",
        name: "blog",
      },
    ],
  },
];

使用嵌套map渲染时写了如下代码：

{arr.map((element) => (
          <div key={element.name}>
            <h4 key={element.name}>{element.title}</h4>
            <ul key={element.name}>
              {element.content.map((index) => (
                <li key={index.id}>
                  {index.name}
                </li>
              ))}
            </ul>
          </div>
        ))}

渲染正常但出现警告：

Warning: Each child in a list should have a unique "key" prop.

问题原因 #

1. 外层数组的每个element对象没有name属性，element.name会返回undefined，导致所有外层<div>的key都是undefined，违反了key必须唯一的要求。
2. 只有循环生成的列表子元素需要设置key，<h4>和<ul>是单个固定元素，不是循环产物，给它们加key完全多余，无法解决问题。

修复方案 #

• 外层循环的key使用element.title（当前数据里title是唯一值，若后续可能出现重复title，建议给外层每个对象添加唯一id字段）。
• 移除<h4>和<ul>上多余的key，只保留循环生成元素的key。

修正后的代码：

{arr.map((element) => (
  <div key={element.title}>
    <h4>{element.title}</h4>
    <ul>
      {element.content.map((item) => (
        <li key={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  </div>
))}

注：内层循环参数名改为item，避免和循环索引参数混淆，属于可读性优化。

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