「items」配列：
[
{id:1,name:"Product 1",label:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",price:25},
{id:2,name:"Product 2",label:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",price:30},
{id:3,name:"Product 3",label:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",price:50},
{id:4,name:"Product 4",label:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",price:150},
{id:5,name:"Product 5",label:"Lorem ipsum dolor sit amet, consectetur adipiscing elit",price:10}
]
「cartItems」配列：
[
{id:1,qty:1},
{id:4,qty:5}
]
IDが両方の配列にあるアイテムのコンポーネントを作成する必要があります。私はそれを試してみました：
cartItems.map(cartItem => {
return items.map(item => {
if (cartItem.id === item.id) {
return <MyComponent key={cartItem.id} />
}
});
})
そしてそれは動作します。しかし、このようにマップを2回使用する代わりに他の方法はありますか？
アプローチの複雑さを改善するのに役立つ構造を作ってみましょう。
オブジェクトルックアップを使用して、すべてのカートアイテムの在庫にあるすべてのアイテムをフィルタリングする必要がないようにすることができます。最初に、ルックアップを行う関数を定義します。
const toObjectLookup = (items, keySelector) =>
Object.fromEntries(items.map(item => [keySelector(item), item]));
そしてこれを私たちのアイテムで使用します：
const itemsById = toObjectLookup(items, item => item.id);
itemsById次のような構造にしてください。
{
"1": {
"id": 1,
"name": "Product 1",
"label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"price": 25
},
"2": {
"id": 2,
"name": "Product 2",
"label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
"price": 30
},
// ...
}
これで、マッピングを改善できます
cartItems.map(cartItem => {
const item = itemsById[cartItem.id];
return <MyComponent key={cartItem.id} />;
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加