Javascript 反应：展平子项（…）：遇到两个具有相同键的子项

我知道以前有人问过这个问题，但我不确定我是否理解这里发生了什么。我在React组件中映射了一组对象来创建导航：某些元素可能有子元素，因此我为这些元素添加了第二个.map函数。 一切正常，但第二个子元素不显示，因为它“遇到两个具有相同键的子元素”。困惑…有人能解释为什么吗？我使用的标题作为关键，现在是唯一的

这是我的项目数组

let navItems = [
  {
    title: "Home",
    href: "/",
    children: []
  },
  {
    title: "Evaluations",
    href: "/evaluations",
    children: [
      {
       id: 1,
       title: "List all evalutions",
       href: "/"
      },
      {
        id: 2,
        title: "Planner",
        href: "/"
      },
    ]
  }
]

代码如下：

let items = this.props.items.map((item) => {
  if(item.children.length > 0) {
    return item.children.map((child) => {
      return <li className="menu--item" key={ item.title }>
        <a href={ item.href } className="menu--link">{ item.title }</a>
        <ul className="dropdown">
          <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li>
        </ul>
      </li>
    })
  } else  {
    return <li className="menu--item" key={ item.title }>
      <a href={ item.href } className="menu--link">{ item.title }</a>
    </li>
  }
})

let items=this.props.items.map（（item）=>{
如果（item.children.length>0）{
返回项.children.map（（子项）=>{
return





})
}否则{
return


}
})

在迭代中呈现项目时，应为每个元素提供唯一的

键

在这里，您使用
item.title
作为项的
子项的键，该子项对于该项的每个子项都是相同的，并且如果
item.childrence.length>0
，您将返回一个数组，并在
else
案例中返回一个元素。我想你应该这样写：

let items = this.props.items.map((item) => {
  if(item.children.length > 0) {
    return (
      <div key={item.id}>
        {item.children.map((child) => {
          return (
            <li className="menu--item" key={ child.id }>
              <a href={ item.href } className="menu--link">{ item.title }</a>
              <ul className="dropdown">
                <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li>
              </ul>
            </li>  
          )
        })}
      </div>
    )
  } else  {
    return <li className="menu--item" key={ item.id }>
      <a href={ item.href } className="menu--link">{ item.title }</a>
    </li>
  }
})

let navItems = [
  {
    id: '1',
    title: "Home",
    href: "/",
    children: []
  },
  {
    id: '2',
    title: "Evaluations",
    href: "/evaluations",
    children: [
      {
       id: '2.1',
       title: "List all evalutions",
       href: "/"
      },
      {
        id: '2.2',
        title: "Planner",
        href: "/"
      },
    ]
  }
]

希望有帮助。
在迭代中渲染项目时，应该为每个元素提供唯一的
键

在这里，您使用
item.title
作为项的
子项的键，该子项对于该项的每个子项都是相同的，并且如果
item.childrence.length>0
，您将返回一个数组，并在
else
案例中返回一个元素。我想你应该这样写：

let items = this.props.items.map((item) => {
  if(item.children.length > 0) {
    return (
      <div key={item.id}>
        {item.children.map((child) => {
          return (
            <li className="menu--item" key={ child.id }>
              <a href={ item.href } className="menu--link">{ item.title }</a>
              <ul className="dropdown">
                <li key={ child.title }><a href="{ child.href}">{ child.title }</a></li>
              </ul>
            </li>  
          )
        })}
      </div>
    )
  } else  {
    return <li className="menu--item" key={ item.id }>
      <a href={ item.href } className="menu--link">{ item.title }</a>
    </li>
  }
})

let navItems = [
  {
    id: '1',
    title: "Home",
    href: "/",
    children: []
  },
  {
    id: '2',
    title: "Evaluations",
    href: "/evaluations",
    children: [
      {
       id: '2.1',
       title: "List all evalutions",
       href: "/"
      },
      {
        id: '2.2',
        title: "Planner",
        href: "/"
      },
    ]
  }
]

希望有帮助。
发生这种情况是因为您正在映射
item.children
但返回一个包含
item.title
的键<代码>项目。标题在该循环中不会更改，因此您最终会得到2个具有“评估”键的元素。我怀疑您想在
中使用
map

let items=this.props.items.map（（item）=>{
如果（item.children.length>0）{
return


{item.children.map（（child）=>{
return

})}


}否则{
return


}
})
发生这种情况是因为您正在映射
item.children
但返回一个包含
item.title
的键<代码>项目。标题在该循环中不会更改，因此您最终会得到2个具有“评估”键的元素。我怀疑您想在
中使用
map

let items=this.props.items.map（（item）=>{
如果（item.children.length>0）{
return


{item.children.map（（child）=>{
return

})}


}否则{
return


}
})
哦，是的，我在同一个项目中循环了两次，你是对的。我更喜欢这个解决方案，因为我不想在数组中添加ID，而是想让它有点自由。谢谢多诺万。哦，是的，我在同一个项目中循环了两次，你是对的。我更喜欢这个解决方案，因为我不想在数组中添加ID，而是想让它有点自由。谢谢多诺万，谢谢瑞特什，你说得对。不过我不想在数组中添加ID。那么，请确保
title
不要重复。谢谢Ritesh，你是对的。不过我不想在数组中添加ID。然后，确保
title
不重复。