Javascript 在react中查找两个对象数组的公共属性值

“项目”数组：

“cartItems”数组：

我需要为ID在两个数组中的项创建一个组件。我试过：

cartItems.map(cartItem => {
   return items.map(item => {
       if (cartItem.id === item.id) {
          return <MyComponent key={cartItem.id} />
       }
   });
})

cartItems.map（cartItem=>{
返回items.map（item=>{
if（cartItem.id==item.id）{
返回
}
});
})

---

它是有效的。但是有没有其他方法可以代替像这样使用map两次呢？

另一种方法：

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

cartItem.filter（v=>（items.findIndex（x=>x.id==v.id）>=0））.map（（value）=>
{
返回
})

让我们制定一个有助于提高方法复杂性的结构

我们可以使用对象查找，这样就不需要对每个购物车项目的库存中的每个项目进行筛选。首先，定义进行查找的函数：

const toObjectLookup = (items, keySelector) => 
    Object.fromEntries(items.map(item => [keySelector(item), item]));

并将其用于我们的产品：

const itemsById = toObjectLookup(items, item => item.id);

为我们提供一个

itemsbyd

结构，如下所示：

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

cartItems.map（cartItem=>{
const item=itemsbyd[cartItem.id]；
返回；
})

以下是答案，请使用

。过滤器
和
。一些

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