アジェンダ
Reactで発生する「Warning: Each child in a list should have a unique “key” prop.」という警告の解消方法について簡単にまとめます。
この警告はエラーメッセージ通りの内容ですが、備忘録として記録します。
エラーの原因と解決法
このエラーメッセージを日本語にすると次のようになります。
警告: リスト内の各子要素はユニークな "key" プロパティを持つ必要があります。
この警告が表示される主な原因として、以下の2つが考えられます。
1. key プロパティが定義されていない
原因:
リスト内の要素にkeyプロパティが定義されていない場合、この警告が表示されます。
解決法:
要素にkeyプロパティを定義することです。
mapメソッドを使用して要素を生成している場合は、第2引数のindexを使用してkeyプロパティを定義することで解決できます。
2. key プロパティがユニークでない
原因:
リスト内の要素に設定されたkeyプロパティがユニークでない(keyが重複しているということ)場合、この警告が表示されます。
解決法:
keyが重複しないようkeyプロパティを定義する。