列表中的每个孩子都应该有一个唯一的“key”道具：无法确定我的代码中的问题

Question

我是使用 React 的 Typscript 新手，我在 Google 控制台 Inspect 元素上收到此错误消息。我检查了很多帖子，但无法理解这里出了什么问题。有人可以帮助纠正我的代码中的错误吗？

index.js:1 警告：列表中的每个子项都应该有一个唯一的“key”属性。

检查 的渲染方法PostList。看

in div (at PostList.tsx:19)
in PostList (at pages/index.tsx:25)
in div (at pages/index.tsx:21)
in IndexPage (at App.tsx:68)
in component (created by Context.Consumer)
in Route (at App.tsx:65)
in div (at App.tsx:64)
in div (at App.tsx:85)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:84)
in App (at src/index.tsx:8)

 export default class PostList extends React.Component <Props, Post>{
 renderPosts(){
    const posts=Object.values (this.props.posts);
    return posts.map((n)=> <div>
         <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
         </div>);
}
render(){
    return(
        <div>
            { this.renderPosts() }
        </div>
    )
 }
 }

Answer 1

将 key 与包装标签 div 一起使用

return posts.map((n, index)=> <div key={index}>
             <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
             </div>);

唯一键更好，你应该只使用索引作为最后的手段

key={n._id}

这是优选的。