【React】Warning: Each child in a list should have a unique “key” prop.の対処法

本記事では、ReactでコンソールログにWarning: Each child in a list should have a unique “key” prop.のエラーが表示された時の対処法について解説しています。

Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書

本書情報

著者	岡田 拓巳
発売日	2021/9/17
ページ数	272ページ
Kindle版	○
レビュー (Amazon)	(152件)

モダンJavaScriptの基本から始める　React実践の教科書 （最新ReactHooks対応） [ じゃけぇ（岡田　拓巳） ]

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報

出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤 功平、角 征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

対処法

まず始めにエラーの対処法ですが、とても簡単でkey属性の値に一意のキーを指定するだけでOKです。下記のコードはWarning: Each child in a list should have a unique “key” prop.のエラーが出力されます。

import { useState } from "react";

function App() {
  const [values, setValues] = useState(["A", "B", "C", "D", "E"]);
  const onDeleteBtnClicked = (v) => {
    const newValues = values.filter((value) => value !== v);
    setValues(newValues);
  };
  return (
      <ul>
        {values.map((value) => (
          <li>
            <button onClick={() => onDeleteBtnClicked(value)}>削除</button>
            {value}
          </li>
        ))}
      </ul>
  );
}

export default App;

どこにkey属性を設定するのかというと、mapメソッドで展開されている子要素のHTML(JSX)に設定します。今回の場合ですと、liタグに設定します。

{values.map((value) => (
  <li key={value}>
    <button onClick={() => onDeleteBtnClicked(value)}>削除</button>
    {value}
  </li>
))}

これでコンソールログにエラーが出力されなくなりましたが、何故key属性を指定する必要があるのでしょうか？詳しく見ていきましょう。

key属性を付ける意味

key属性を付ける意味は、Reactがどの要素が追加/削除/変更されたかを識別出来るようにするためです。言葉だけだと分かり辛いと思うので、先ほどのサンプルコードを使用してどのように変化するか確認してみましょう！

まずは検証ツールのElementsタブを開き、key属性を設定していないエラー解消前のサンプルコードで削除ボタンをクリックしてみましょう。

すると、関係ない要素まで再レンダリングされていることが分かります。本来Reactは仮想DOMで変更前と変更後を比較し変更のあった差分だけDOMに反映させる方法でパフォーマンス向上を実現しているのでこれはNGになります。※Warningエラーなのでプログラム自体は動きます。

次に、key属性を設定したエラー解消後のサンプルコードで削除ボタンをクリックしてみましょう。

エラー解消前のサンプルコードと見比べると、必要最低限の再レンダリングで済んでていることが確認できます。