React列表子元素缺少唯一key prop问题排查求助

你遇到的控制台警告，根源是代码里的两处列表循环没有给直接子元素添加唯一的key属性：

• 导航项循环：生成<Nav.Item>的map循环中，每个<Nav.Item>作为列表的直接子元素，必须配置唯一key
• 标签面板循环：生成<Tab.Pane>的map循环里，<Tab.Pane>同样是列表直接子元素，也需要添加key

你给<ProjectCard>加的key只能作用于它自身，无法替代外层<Tab.Pane>的key要求。

修改后的代码片段 #

1. 修复导航项循环：

{projMultimedia.map((project, index) => (
    <Nav.Item key={project._id}>
        <Nav.Link eventKey={index}>{project.title}</Nav.Link>
    </Nav.Item>
))}

2. 修复标签面板循环：

{projMultimedia.map((project, index) => (
    <Tab.Pane key={project._id} eventKey={index} className="h-100">
        <ProjectCard project={project} />
    </Tab.Pane>
))}

额外提示 #

优先用后端返回的唯一标识（比如project._id）作为key，别用循环的index。如果后续列表有增删、排序变化，index会导致React错误复用组件，引发渲染异常；而项目ID是稳定唯一的，能保证React正确识别每个列表项。

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez