なぜ[react]map関数を適用するときにキーアイテムを与えるのか

私を殺して反応する

map関数の適用中に発生したエラー

map関数の使用を考慮しないと、警告ウィンドウが表示されます.

Each child in an array should have a unique “key” prop.

キー値を指定していません
同じ兄弟で構成されたリスト(地図に撒かれたリスト)独特のキーアイテムをください.
そう言えば.

キー値が必要なのはなぜですか?

たとえば、地図にリストを撒くとします.5つのリストのうち1つだけが変更された場合、リアクターはコンテンツの変更時にレンダリングを再開します.
ここで変わったのかな?これを防止するために、キー値を各要素に贈ります.
これにより、リアクターはキー値になるかどうかを区別し、必要に応じてすべてレンダリングするのではなく修正します.

const commentList = commentArray.map((value, key) => (
    <div key={key} className="user-comment">
      <span className="feed-id">duhyeon</span>
      <span className="feed-comment">{value}</span>
      <button type="button" className="btn-like">
        like
      </button>
    </div>
  ));

鍵にインデックスを入れます!

もしそう言ったら、手を上げて両手を交差させて、だめだと言ってください.
このような自信だけでなく、reactの公式文書を借りることもできます.
インデックスをキーとして使用するときに配列を再配置すると、構成部品の状態に関連する問題が発生する可能性があります.構成部品インスタンスは、鍵に基づいて更新および再利用されます.キーとしてインデックスを使用すると、アイテムが並べ替えられたときにキーも変更されます.したがって、構成部品の状態が悪化したり、予期せぬ事態になる可能性があります.
この内容の正式な文書をもとにします.
項目が並べ替えられていなければ、うまく働けるのに、並べ替えられた胆女は効率的に動きません.
たとえば、ユーザーがinputを動的に追加および入力できる場合、keyをインデックスとして使用すると、私が入力したinputの値は+1に移動します.だから公式文書は並べ替えに言及した.
がんばってください.