【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【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実践の教科書
総合評価
( 5 )
メリット
  • JavaScriptの基礎から始めてReactの機能を一通り学べる
  • 実務で必要となる知識を意識しながら学習を進められる
  • 現場のシチュエーションベースのストーリーで技術解説
先輩くん

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

後輩ちゃん

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

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

対処法

まず始めにエラーの対処法ですが、とても簡単で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属性を設定したエラー解消後のサンプルコードで削除ボタンをクリックしてみましょう。

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次