反応の地図

map ()関数は、配列を反復処理したり、データ項目を操作したり変更したりするために使用します.反応して、MAP ()関数はDOMにデータのリストをレンダリングするのに最も一般的に使用されます.
map ()関数を使用するには、繰り返し実行する配列にアタッチします.map ()関数は、引数としてコールバックを予想し、配列の各要素に対して一度実行します.コールバックパラメーターから、現在の要素、現在のインデックス、および配列そのものにアクセスできます.map ()関数はオプションの2番目の引数をとります.これはコールバック内で使用するために渡すことができます.コールバックが実行されるたびに、返された値が新しい配列に追加されます.例えば、

const num = [3, 8, 11, 7, 5];

const num2x = num.map((n) => n * 2);

console.log(num2x); // [6, 16, 22, 14, 10]

使用法
ユーザーIDと名前を含むオブジェクトの配列を考えます.DOMに表示するには、map ()関数を使用し、コールバック関数からJSXを返します.これはmap ()関数の最も一般的な使用例です.

const Users = () => {
  const data = [
    { id: 1, name: "Timo Werner },
    { id: 2, name: " Wayne Gakuo" },
    { id: 3, name: "Kai havartz" },
  ];

  return (
    <div className="users">
      {data.map((user) => (
        <div className="user">{user}</div>
      ))}
    </div>
  );
};

レンダリング以外にも、他のファイルからインポートできるユーティリティ関数でmap ()関数を使用することもできます.
異なる画像サイズの配列を仮定します.

const imageSizes = [
  { name: "horizontal", width: 600, height: 380 },
  { name: "vertical", width: 400, height: 650 },
  { name: "thumbnail", width: 300, height: 300 },
];

オブジェクトを次のような形式で正規化する必要があります.

imageSizes.map((a) => {
  const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
  return `${captalizedName} image - ${a.width} x ${a.height}`;
});

次に、これを再利用可能なユーティリティ関数にし、関数StringIfImageSizeを指定します.

const stringifyImageSizes = (imageSizes) => {
  return imageSizes.map((a) => {
    const capitalizedName = a.name[0].toUpperCase() + a.name.slice(1);
    return `${captalizedName} image - ${a.width} x ${a.height}`;
  });
};

関数宣言の前にエクスポートキーワードを追加して、他のアプリケーションにアクセスできるようにします.ジェイ.JSXファイル.

export const stringifyImageSizes = (imageSizes) => {
  // ...
};

さて、コンポーネントファイル内のimportキーワードを使用して関数をインポートします.

import React from "react";

import { stringifyImageSizes } from "./utils";

const Images = () => {
  const imageSizes = [
    { name: "horizontal", width: 600, height: 380 },
    { name: "vertical", width: 400, height: 650 },
    { name: "thumbnail", width: 300, height: 300 },
  ];

  const normalizedImageStrings = stringifyImageSizes(imageSizes);

  return (
    <div className="images">
      {normalizedImageStrings.map((s) => (
        <div className="image-type">{s}</div>
      ))}
    </div>
  );
};

そしてそれです.かなり簡単、右?
map ()関数を使用すると、元の配列を乱さずにすべての種類の操作を行うことができます.それがデフォルトで副作用を引き起こさないので、非突然変異部分は重要です、そして、あなたのコードをデバッグするのは簡単にします.元の配列を変異したい場合は、伝統的なループや他の種類のループを使用することもできます.