React ネイティブ Foreach ループ

Shubham Vora 2024年2月15日

React Native React Native Loop

map() メソッドを使用して、React-Native で配列を反復処理する
map() メソッドを使用してオブジェクトの配列を反復処理する
まとめ

開発者は、React-native を使用しながら、配列などのオブジェクトを反復処理して小さなコンポーネントを作成する必要がある場合があります。通常の JavaScript では、foreach ループを使用して各配列要素を反復処理できますが、React はこれをサポートしていません。

React で配列の要素を反復処理するには、他にもいくつかの方法があります。これについては、この記事で学習します。

`map()` メソッドを使用して、React-Native で配列を反復処理する

React-native では、配列の map() メソッドは foreach メソッドと同じように機能します。すべての要素を反復処理し、ユーザーはすべての配列要素に対して何らかの操作を実行できます。

以下の例では、ユーザーへのウェルカムメッセージを含む配列名 message を作成しました。 map を使用して配列を反復処理し、Text コンポーネントを使用して配列のすべての要素をレンダリングします。

コード例:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const message = ["Welcome", "To", "DelftStack", "!"];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Displaying the Welcome Message Using the Map
      </Text>{" "}
      {/* Display all array elements in a single row */}
      <View style={{ flexDirection: "row", }}>
      {message.map((post) => {
        return <Text style={{ fontSize: 20 }}>{post} </Text>;
      })}
      </View>
    </View>
  );
}

出力：

React-Native で map() メソッドを使用して配列を反復処理する

上記の出力では、すべての要素が 1 行に表示されていることがわかります。開発者が map() メソッドを使用しない場合、message 要素 ごとに Text コンポーネントを作成する必要があり、コードが不明確になります。

`map()` メソッドを使用してオブジェクトの配列を反復処理する

それでは、配列の map() メソッドのリアルタイム使用について学習します。開発者が、データベースから書籍のデータを取得し、書籍と著者を 1 行ずつ表示する必要があるアプリケーションを開発しているとします。

ここでは本のデータを取得していませんが、本の著者とタイトルを含むオブジェクトの配列を作成しています。その後、本の詳細を含む Text コンポーネントを返す books 配列を参照して map() メソッドを使用します。

コード例:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const books = [
    {
      author: "jack",
      Title: "Book 1",
    },
    {
      author: "mack",
      Title: "Book 2",
    },
    {
      author: "Shubham",
      Title: "Book 3",
    },
    {
      author: "jem",
      Title: "Book 4",
    },
  ];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Showing the Book Title and its author name
      </Text>{" "}
      {/* Display all array elements one by one */}
      <View>
        {books.map((book) => {
          return <Text style={{ fontSize: 20 }}>{book.Title} by {book.author}</Text>;
        })}
      </View>
    </View>
  );
}

出力：

map() メソッドを使用してオブジェクトの配列を反復処理

まとめ

この記事では、読者は React Native で要素の配列を反復処理する方法を学びました。ユーザーが return 部分内の配列を繰り返し処理したい場合は、map() メソッドを使用します。

それ以外の場合、ユーザーは foreach メソッドを使用できます。

著者： Shubham Vora

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

React ネイティブ Foreach ループ

`map()` メソッドを使用して、React-Native で配列を反復処理する

`map()` メソッドを使用してオブジェクトの配列を反復処理する

まとめ

関連記事 - React Native

関連記事 - React Native Loop

map() メソッドを使用して、React-Native で配列を反復処理する

map() メソッドを使用してオブジェクトの配列を反復処理する

まとめ

関連記事 - React Native

関連記事 - React Native Loop

`map()` メソッドを使用して、React-Native で配列を反復処理する

`map()` メソッドを使用してオブジェクトの配列を反復処理する