如何在没有 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",
      },
    ],
  },
];

我想绘制所有这些地图。我尝试过使用和添加到每个标签nested mapskey prop

{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>
        ))}

我试过使用，它工作正常并显示数组，但我收到了此警告nested maps

警告：列表中的每个子项都应该有一个唯一的“键”道具。

我应该如何解决此警告？

嵌套的 reactjs 数组

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

这会将索引添加到数组映射。

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

上一个：如何在bigquery中正确取消嵌套重复/数组列？

下一个：将值插入结构列？

如何在没有 key prop 警告的情况下拥有数组的嵌套映射？

How to have nested maps of an array without the key prop warning?

评论

评论