Mapオブジェクトを反復処理するにはどうすればよいですか?

Reactでは、Mapオブジェクトを反復処理するためにmap()関数を用いることができます。

まずMapオブジェクトを配列に変換します。[…mapObj]を使うと、Mapオブジェクトをキーと値のペアの配列に変換できます。

次にmap()関数を使って、配列の各ペアを処理することもできます。

下記にサンプルコードを示します。

// 假设mapObj是一个Map对象
const mapObj = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
// 将Map对象转换为数组
const mapArray = [...mapObj];
// 遍历数组
const result = mapArray.map(([key, value]) => {
return (
<div key={key}>
<span>{key}: </span>
<span>{value}</span>
</div>
);
});
// 在组件中渲染结果
return <div>{result}</div>;

上記の例では、最初にMapオブジェクトであるmapObjをmapArrayという配列に変換します。次にmap()関数を使用して配列を処理し、各キーと値のペアからキーと値を含む

要素を生成します。最後に、結果をコンポーネントでレンダリングします。

Reactではリスト要素に一意のkey属性が必要なので、すべての

要素にキーとしてkey属性を渡すことに注意してください。これは、Reactのパフォーマンスを向上させるのに役立ちます。

广告
広告は10秒後に閉じます。
bannerAds
bannerAds