动态创建React Boostrap Navbar时出现关键错误

Question

我有一个json文件，其中包含React Bootstrap Navbar的属性。我得到了错误"；列表中的每个孩子都应该有一个唯一的"；键"；道具"我尝试在Nav.Link和NavDropdown中添加key={section.id}。在NavDropdown.Item中，我使用了key={Item.id}。错误仍然会发生，键不会出现在元素中。我意识到这并不是真的应该以这种方式构建的，我希望在未来用某种CMS构建json。

import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
React Navbar code:
<Navbar className="nav-color" variant="dark" expand="lg">
<Navbar.Brand href="#home">My Nav</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
{props.navData.map(section => {
return (
<>
{section.type === 'link' ? <Nav.Link href={section.path} key={section.id}>{section.category}</Nav.Link> : ''}
{section.type === 'dropdown' ? <NavDropdown title={section.category} key={section.id} id='basic-nav-dropdown'>
{section.items.map(item => {
return (
<>
<NavDropdown.Item href={item.path}>{item.title}</NavDropdown.Item>
</>
)
})}
</NavDropdown> : ''}
</>
)
})}
</Nav>
</Navbar.Collapse>
</Navbar>

Example of json:
[
{
"id": 1,
"category": "Home",
"type": "link",
"path": "/"
},
{
"id": 2,
"category": "Dropdown1",
"type": "dropdown",
"items": [
{
"title": "Item1",
"type": "page",
"path": "Item1"
},
{
"title": "Item2",
"type": "page",
"path": "Item2"
},
{
"title": "Item3",
"type": "page",
"path": "Item3"
},
{
"title": "Item4",
"type": "page",
"path": "Item4"
},
{
"title": "Item5",
"type": "page",
"path": "Item5"
}
]
}
]

Answer 1

感谢SakoBu和Akshay的回复。解决方案是：

{props.navData.map((section, sIdx) => { //HERE
return (
<div key={sIdx}> //HERE
{section.type === 'link' ? <Nav.Link href={section.path} key={section.id}>{section.category}</Nav.Link> : ''}
{section.type === 'dropdown' ? <NavDropdown title={section.category} key={section.id} id='basic-nav-dropdown'>
{section.items.map((item, idx) => { //HERE
return (
<div key={idx}> //HERE
<NavDropdown.Item href={item.path}>{item.title}</NavDropdown.Item>
</>
)
})}
</NavDropdown> : ''}
</>
)
})}

Answer 2

尝试：

{section.items.map((item, idx) => {
return (
<>
<NavDropdown.Item key={idx} href={item.path}>{item.title}</NavDropdown.Item>
</>
);
})}