GatsbyでMissing "key" prop for element in iteratorが出る
はじめに
こんにちは。クワガタかカブトムシかでいうとクワガタ派です、筆者です
さて、Gatsbyで作ったほぼほぼチュートリアルでいじってないコードに機能追加する機会がありました。
Reactもあんまり理解していないが故に、お作法でつまづきました。
GatsbyでMissing "key" prop for element in iteratorが出る
Contentfulからpost一覧を取得して、postの数だけitemを生成したいのですが、スクリーンショットのように怒られたました
const posts = data.allContentfulPost.edges
return (
<Wrapper>
<List>
{posts.map(({ node }) => {
return (
<ArticleItem
title={node.title}
heroImage={node.heroImage}
slug={node.slug}
/>
)
})}
</List>
</Wrapper>
)
原因
ArticleItem
にkeyを渡してないため。
Reactのドキュメントには以下の通りの記載があります。
Keys should be given to the elements inside the array to give the elements a stable identity:
解決策
以下のようにArticleItem
にkeyで一意の値を渡してあげれば大丈夫です
const posts = data.allContentfulPost.edges
return (
<Wrapper>
<List>
{posts.map(({ node }) => {
return (
<ArticleItem
+ key={node.slug}
title={node.title}
heroImage={node.heroImage}
slug={node.slug}
/>
)
})}
</List>
</Wrapper>
)
また、Reactのドキュメントに記載の通り、最悪indexを渡せばいいそうです。
おわりに
小さなことですが、知らないことでしたし、こういうことで怒ってくれるのがちょっとうれしいとも感じました。
引き続きググりながら機能追加進めつつ、コードの理解を深めていこうと思います
それでは
Author And Source
この問題について(GatsbyでMissing "key" prop for element in iteratorが出る), 我々は、より多くの情報をここで見つけました https://qiita.com/akitkat/items/fff4d2c8aff6f0173197著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .