[react]Map関数を適用する際のKey props

Map関数の適用時のKey props

Map関数

Map関数は、JavaScriptで使用される高次関数の1つです.

  const numbers = [1, 2, 3, 4, 5];
  const doubled = numbers.map((number) => number * 2);
  console.log(doubled); // [2, 4, 6, 8, 10]

高次関数とは?
高次関数とは、関数をパラメータとして渡したり返したりする関数です.

複数の構成部品をレンダリング

また、要素UIをレンダリングする反応器は、複数の要素をレンダリングするために使用することもできる.

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );

上記のようにして作成し、素子を分離してpropsを伝達することでpropsの数を得ることができる
スケールレンダリング、props値の入力作成など、さまざまな方法で構成部品をレンダリングできます.
ただし、上記の図に示すように、生成時に警告が表示され、リスト内の各項目にキーを追加するよう求められます.

Key props

Keyは、Reactが変更、追加、または削除するアイテムを特定するのに役立ちます.
ユニークな識別子なので、アレイ内部のレイヤーに割り当てる必要があります.
鍵を選択する最善の方法は、データのIDを鍵として使用することである.

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );

安定したIDがない場合は、アイテムインデックスを鍵として使用できます.
ただし、インデックスをキーとして使用するときに配列を再配置すると、構成部品の状態に関連する問題が発生する可能性があります.構成部品インスタンスはkeyに基づいて更新および再利用される.キーとしてインデックスを使用すると、アイテムの順序が変更されるとキーも変更されます.したがって、構成部品の状態が悪化したり、予期せぬ事態になる可能性があります.
インデックスをキーとして使用する問題は、次の条件を満たす場合にのみ発生しません.

ディレクトリとプロジェクトは静的です.直さないわけにはいかない.

リストの項目にはIDがありません.

リストは再ソートまたはフィルタされません.

JSXにmap()を含める

  // JSX에 map() 포함시키기
  function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
      <ListItem key={number.toString()}
                value={number} />
    );
    return (
      <ul>
        {listItems}
      </ul>
    );
  }

JSXを使用すると、括弧にすべての式を含めることができます.したがって,map()関数の結果を行内処理とすることができる.

  // JSX에 map() 인라인으로 처리
  function NumberList(props) {
    const numbers = props.numbers;
    return (
      <ul>
        {numbers.map((number) =>
          <ListItem key={number.toString()}
                    value={number} />
        )}
      </ul>
    );
  }

参考資料
1. リストとキー
2. Index as a key is an anti-pattern
3. 子どもの再帰処理