React でオブジェクトをループする

このチュートリアルでは、forEach()、Object.keys、および map() メソッドを使用して、React でオブジェクトをループする方法を示します。

React でオブジェクトをループする

React では、.map() メソッドを使用して、配列からデータを取得してコンポーネント (または DOM 要素) を生成することがよくあります。

たとえば、e コマース ストアを運営している場合、オブジェクトの配列を持つことができます。各オブジェクトには、1つの製品に関する詳細情報が含まれています。 次に、この配列をループして、各製品のコンポーネントを生成します。

React では、配列内の項目を調べてコンポーネントを生成するのが標準的な操作です。 ただし、オブジェクトのループはもう少し複雑で、追加の手順が必要です。

方法を学びましょう。

Object.keys() & map() を使用して、React でオブジェクトをループする

まず、引数としてオブジェクトを取る Object.keys() メソッドを使用して、Object プロパティの配列を生成する必要があります。

次に、この配列で .map() メソッドを使用して、各プロパティのカスタム コンポーネントを生成できます。 この例を見てみましょう:

export default function App() {
  const person = {
    firstName: "Irakli",
    lastName: "Tchigladze",
    age: 24,
    occupation: "writer"
  };
  return (
    <div className="App">
      {Object.keys(person).map((key) => (
        <h1>{key + " - " + person[key]}</h1>
      ))}
    </div>
  );
}

ここでは、人を説明する 4つのプロパティを持つ person オブジェクトがあります。 JSX 内では、Object.keys() メソッドを使用して、すべてのオブジェクト プロパティのリストを取得します。

次に、.map() メソッドを使用して、オブジェクト プロパティとその値を表示する <h1> 要素の新しい配列を返します。 以下の出力を参照してください。

出力：

firstName - Irakli
lastName - Tchigladze
age - 24
occupation - writer

forEach() メソッドを使用して、React でオブジェクトをループする

forEach() メソッドを使用して、オブジェクトのプロパティを正常にループすることもできます。 ただし、まず、このメソッドの動作を理解することが不可欠です。

.map() メソッドのように、変更された項目で構成される新しい配列を返しません。 代わりに、新しい配列を作成し、配列内の各項目を変更し、push() メソッドを使用して変更した項目を新しい配列に追加する必要があります。

以下の例を見てみましょう。

const modifiedArray = [];
  Object.keys(person).forEach(function (key) {
    modifiedArray.push(<h1>{key + " - " + person[key]}</h1>);
  });

次に、次のように、JSX 内で modifiedArray を参照できます。

<div className="App">{modifiedArray}</div>