配列を適切に反応させる

あなたが使ったのだろう .map かなりビットとどのようにうまく機能を理解します.私たちは.map 反応も.これは、ページに配列をレンダリングするのに役立ちます.私にとって、私はバニラJSのためのマップ機能の中でキーを実際に使用したことがありません.
次のコンポーネントがあるとしましょう.それは果物の配列をレンダリングします.

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

上の例では、Replyは警告をスローします.

Warning: Each child in a list should have a unique "key" prop.

今すぐあなた.map 関数は何の問題もなく配列の内容をレンダリングしますが、キープロップがなければすべてが間違っていることができます.
我々は、我々の子供に重要な支柱を加える必要があります.map 関数が反応し、要素の位置を知ることができます.これを下のリンクに移動し、要素をクリックしてテストできます.
https://react-fundamentals.netlify.app/isolated/final/07.extra-1.js
最初の2つの例が最後のものと異なる方法を見てください.配列インデックスをキーとして使用することは、反応の既定の動作とは異なりません.インデックスを使用すると、フォーカス状態からここで見ることができますので、フォーカスは常にそのインデックスに滞在します.キーを使用するときのように、要素で移動する代わりに.
キーはユニークでなければなりません.

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li key={item.id}>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

真の英雄のようにこれを説明するために感謝します.