🗂
【React】Warning: Each child in a list should have a unique "key"
エラーになったコード
// jsx部分
return (
// 省略
{values.map((value, index) => {
return (
<>
<ChildComponent value={value} key={index} />
</>
)
})}
// 省略
)
エラーが出なかったコード
// jsx部分
return (
// 省略
{values.map((value, index) => {
return <ChildComponent value={value} key={index} />
})}
// 省略
)
原因など
結局公式記載の通りに書いていなかったことが原因。
ちょっとわかりにくいんですが、
一番外側?の部分にkeyをつけないといけない。
しかし <ChildComponent />
を <></>
で囲ってしまっていた。
ReactはRoRなんかと比べるとトレシュー記事少ないが、
基本、入門記事読んでわからない=おかしな事してるって嗅覚になってれば、
大体問題なさそう。
参考サイト
Discussion