在反應中查找兩個對象數組的公共屬性值

Question

“項目”數組：

[
            {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} />
       }
   });
})

它有效。 但是有沒有其他方法而不是像這樣使用 map 兩次？

Answer 1

另一種方式做到這一點：

cartItem.filter(v => (items.findIndex(x => x.id == v.id) >= 0)).map((value) => 
{
    return <MyComponent key={cartItem.id} />
})

Answer 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} />;
})