React

【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件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

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

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

対処法

まず始めにエラーの対処法ですが、とても簡単で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アクセスランキング にほんブログ村