如果条件在React JS中的数组中

如何解决如果条件在React JS中的数组中

我有一个如下的值对数组，

const servingType = [
    {value: 'Hot',label: 'Served Hot'},{value: 'Cold',label: 'Served Cold'},{value: 'NA',label: 'Not Applicable'}
];

我有一个对象，该对象具有服务类型的动态值。我必须检查数组中的服务类型，如果它与值匹配，则在数组的标签中显示该值。 我的对象：

const selectedItem = {
    menuItemID: selectItem.menuItemID || 100,menuItemName: 'Menu Item Name (M)',itemPrice: 100
    servingType:'Hot',preparationTime: 15
}

我尝试了如下代码，但无法确定。对以下代码有任何想法。

<div>
  {servingType.map((serveType,id) => (
     if(servingType[serveType].value === selectedItem.servingType){
     {selectedItem.label}
  }                               
  ))}
<div>

解决方法

Ciao，我建议以这种方式使用filter函数而不是map函数：

const servingType = [
    {value: 'Hot',label: 'Served Hot'},{value: 'Cold',label: 'Served Cold'},{value: 'NA',label: 'Not Applicable'}
];

const selectedItem = {
    menuItemID: "selectItem.menuItemID || 100",menuItemName: 'Menu Item Name (M)',itemPrice: 100,servingType: 'Hot',preparationTime: 15
};

console.log(servingType.filter(st => st.value === selectedItem.servingType)[0].label)

注意：我将menuItemID转换为字符串只是因为在我的示例中selectItem未定义。

编辑

@Guy Incognito通过使用find而不是filter提出了另一个有趣的解决方案：

const servingType = [
        {value: 'Hot',label: 'Not Applicable'}
    ];

    const selectedItem = {
        menuItemID: "selectItem.menuItemID || 100",preparationTime: 15
    };

    console.log(servingType.find(st => st.value === selectedItem.servingType).label)

,

将()更改为{}，然后返回结果。 ()的内部需要一个（React）对象。

还将servingType[serveType].value更改为serveType.value，并将{selectedItem.label}更改为serveType.label

<div>
{
  servingType.map((serveType,id) => {
    if (serveType.value === selectedItem.servingType) {
      return serveType.label;
    }
    return null;
  });
}
<div>