ReactJS - 要素にキーがあるにもかかわらずキーがありません

Question

私のpropコンポーネントで共通のWarning: Each child in an array or iterator should have a unique "key" propエラーが発生しました。返されたdiv要素の配列のunqiueIDでキーを設定していますが、この警告が表示されます。間違った要素に設定していますか？それはネストされた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コンポーネントは、キープロパティが必要であることを述べています。したがって、これらの2つのコンポーネントの中にdivタグの代わりにキープロパティを設定する必要があります。