【メモ】React書いてて警告された「Warning: Each child in a list should have a unique "key" prop.」というkeyに関するWarningのメモ
はじめに
こんにちは、がんがんです。
Next.jsでフロントの実装時、下記のようなWarningが表示されていました。
Warning: Each child in a list should have a unique "key" prop.
エラーではないので処理しなくてもいいかもしれませんが、放置するのは気が引けます。
そこで、今回はこちらについて調査を行いました。
今回起きた警告文
改めてWarningについて記述しておきます。
Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
今回の問題点・解決策
今回Warningが起こった部分では、map関数の処理を行っていました。
後述する参考記事も同様の問題が起こっていました。
解決方法としては、mapを実行する際にkeyをきちんと指定してあげるでした。
keyをきちんと指定してあげないと1つ1つの要素を区別できなくなるみたいですね。keyって大事なんですね。
おわりに
今回はReactに関するWarningについて調査を行いました。
今後も起きる可能性があるので、遭遇するたびに逐一メモを残していけたらと思います。
