Map関数

基本形態:Array.map(callback(currentValue[, index[, array]])

パラメータ

callback:新しい配列要素を生成する関数です.次の3つのパラメータがあります.

currentValue:現在処理が必要なコンテンツ

インデックス:現在処理が必要な要素のインデックス(オプション)

array:map()呼び出しの配列

実行結果に戻る値

新しい配列で、配列内の各要素のcallbackを実行した結果を収集します.

Key

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

上記のコードを説明すると、map関数はnumberをliタグとして試行し、numbers配列の長さを実行し、liタグをulタグに包むプログラムであることがわかります.ただし、上記のコードを実行すると、結果はページに表示され、リスト内の各項目にキー値を指定する必要があることを警告します.
So、Keyについて質問すると、Reactはアイテムを変更、追加、または削除するときに識別するのに役立ちます.これは、各要素に一意のidを付与することを意味する.
上記のコードを再割り当てして変更すると、コードは次のようになります.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number, index) =>
    <li key={index}>
    {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

変換Map関数の主体は配列であるため、各要素のインデックス値ほどユニークな値はありません.ただし、エレメントを途中で削除すると、付与されたキー値とその配列のインデックス値が変化する現象が発生します.したがって、インデックスもキー値として使用するのに適していません.したがって、多くの場合、データのid値をキーとして使用する.id値(ex.数値)がない場合は、toString()関数を使用してデータ型をstringに変換します.

Keyの伝統的な方法を使う

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
    {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Key(SNSにコメントを表示する)の使用例

function Comment(comment) {
  let commentArray = comment.comment;
  return commentArray.map((props) => {
    return (
      <div key={props.id}>
        <span className="userid">{props.userid}</span> 
        {props.comment}
      </div>
    );
  });
}