ReactJS - 缺少關鍵儘管在元

Question

我共同面臨的Warning: Each child in an array or iterator should have a unique "key" prop錯誤與我的道具組成部分，儘管設置了關鍵我陣列的unqiueID爲返回的div元素我看到這個警告的關鍵。我是否將它設置在錯誤的元素上？它可能與嵌套map有關嗎？

JSON實例：

{ 
annotationId: 117, 
title: "Test", 
discovery: "Test 123", 
annotation_comments: [{ 
annotationCommentId: 12, 
comment: "Lorem Ipsum" 
}] 
} 

詳細的錯誤：

in AnnotationCard (created by AnnotationFeed) 
    in AnnotationFeed (created by AnnotationFeedContainer) 
    in div (created by AnnotationFeedContainer) 
    in AnnotationFeedContainer (created by Annotation) 
    in div (created by Annotation) 
    in Annotation 

組件：

//Loop through JSON and component 
const AnnotationFeed = props => { 
    return (
     <div> 
     { 
      props.annotations.map((annotation, index) => { 
       return (
        <AnnotationCard {...annotation}> 
         { annotation.annotation_comments.map((comment, i) => <Comments {...comment} />)} 
        </AnnotationCard> 
       ); 
      }) 
     } 
     </div> 
    ) 
} 

const AnnotationCard = props => { 
    return (
     <div key={props.annotationIdHash}> 
      <h4>{props.title}</h4> 
      <p>{props.discovery}</p> 
     </div> 
    ) 
} 

const Comments = props => { 
    return (
     <div key={props.annotationCommentId}> 
      <h4>{props.comment}</h4> 
     </div> 
    ) 
} 

Answer 1

您需要的關鍵這裏

<AnnotationCard {...annotation} key={index}>

這裏

<Comments {...comment} key={i}/>

Answer 2

這個錯誤清楚地說，AnnotationCard和Comments組件需要一個關鍵屬性。所以你應該爲這兩個組件設置一個關鍵屬性，而不是裏面的div標籤。