根據使用過濾器的類別顯示項目

Question

我正在通過開發一個應用程序來學習reactjs。我做得很好，沒有問題。但是，當我試圖根據veg和non-veg等類別列出菜單/餐時，我現在遇到了一個問題。我正在使用lodash的過濾功能，並在控制檯中看到我的過濾功能正在工作，但如果有veg餐，它會給我真正的其他假。但我不想在真與假，而我希望所有，根據蔬菜和非蔬菜下降爲這樣的飯菜輸出：

素食

蘑菇雞腿

非蔬菜

雞莫莫雞燒烤

這裏是我的代碼

const Menu = ({restaurant}) => { 
    const veg = _.filter(restaurant.meal, (meal) => { 
    return meal.meal_category.name==='veg'; 
    }); 
    const nonVeg = _.map(restaurant.meal, (meal) => { 
    return meal.meal_category.name==='Non-veg'; 
    }); 
    return(
    <div> 
     <ul className="list-group veg"> 
     Veg 
     <li className="list-item-group"> 
      {veg} 
     </li> 
     </ul> 
     <ul className="list-group"> 
     Non-veg 
     <li className="list-item-group"> 
      {nonVeg} 
     </li> 
     </ul> 
    </div> 
); 
} 

export default Menu; 

餐廳物體看起來像

[ 
    { 
     "id": 1, 
     "owner": "Sanskar", 
     "meal": [ 
      { 
       "id": 1, 
       "meal_category": { 
        "id": 1, 
        "name": "veg", 
        "slug": "veg" 
       }, 
       "name": "Mushroom drumstick", 
       "slug": "mushroom-drumstick", 
       "price": 30, 
       "quantity": 20, 
       "image": null, 
       "rating": 4.5, 
       "available": true, 
       "restaurant": 1 
      }, 
      { 
       "id": 2, 
       "meal_category": { 
        "id": 2, 
        "name": "Non-veg", 
        "slug": "non-veg" 
       }, 
       "name": "Ham Cheesy Burger", 
       "slug": "ham-cheesy-burger", 
       "price": 180, 
       "quantity": 10, 
       "image": null, 
       "rating": 5.0, 
       "available": true, 
       "restaurant": 1 
      }, 
      { 
       "id": 3, 
       "meal_category": { 
        "id": 2, 
        "name": "Non-veg", 
        "slug": "non-veg" 
       }, 
       "name": "Chicken momo", 
       "slug": "chicken-momo", 
       "price": 100, 
       "quantity": 10, 
       "image": null, 
       "rating": 4.3, 
       "available": true, 
       "restaurant": 1 
      } 
     ], 
     "name": "Kathmandu Fast Food Center", 
     "slug": "kathmandu-fast-food-center", 
     "status": 1, 
    }, 
    { 
     "id": 3, 
     "owner": "Sanskar", 
     "meal": [ 
      { 
       "id": 1, 
       "meal_category": { 
        "id": 1, 
        "name": "veg", 
        "slug": "veg" 
       }, 
       "name": "Potato drumstick", 
       "slug": "potato-drumstick", 
       "price": 30, 
       "quantity": 20, 
       "image": null, 
       "rating": 4.5, 
       "available": true, 
       "restaurant": 1 
      }, 
      { 
       "id": 2, 
       "meal_category": { 
        "id": 2, 
        "name": "Non-veg", 
        "slug": "non-veg" 
       }, 
       "name": "Ham Burger", 
       "slug": "ham-burger", 
       "price": 180, 
       "quantity": 10, 
       "image": null, 
       "rating": 5.0, 
       "available": true, 
       "restaurant": 1 
      }, 
      { 
       "id": 3, 
       "meal_category": { 
        "id": 2, 
        "name": "Non-veg", 
        "slug": "non-veg" 
       }, 
       "name": "Buff momo", 
       "slug": "buff-momo", 
       "price": 100, 
       "quantity": 10, 
       "image": null, 
       "rating": 4.3, 
       "available": true, 
       "restaurant": 1 
      } 
     ], 
     "name": "ABC Restaurant", 
     "slug": "abc-restaurant", 
     "status": 1, 
    }, 
    { 
     "id": 4, 
     "owner": "admin", 
     "meal": [], 
     "name": "DEF Restaurant", 
     "slug": "def-restaurant", 
     "status": 1, 
    }, 
    { 
     "id": 5, 
     "owner": "Sanskar", 
     "meal": [], 
     "name": "sanskar restaurant", 
     "slug": "sanskar-restaurant", 
     "status": 1, 
    } 
] 

Answer 1

使用_.filter()使常數veg和nonVeg，然後返回HTML視圖作出_.map()迭代，並得到適當的li元素：

const Menu = ({restaurant}) => { 
    const veg = _.filter(restaurant.meal, (meal) => { 
     return meal.meal_category.name==='veg'; 
    }); 
    const nonVeg = _.filter(restaurant.meal, (meal) => { 
     return meal.meal_category.name==='Non-veg'; 
    }); 
    return(
     <div> 
      <ul className="list-group veg"> 
       Veg 
       { 
        _.map(veg, (meal) => { 
         return <li className="list-item-group">{meal.name}</li> 
        }) 
       } 
      </ul> 
      <ul className="list-group"> 
       Non-veg 
       { 
        _.map(nonVeg, (meal) => { 
         return <li className="list-item-group">{meal.name}</li> 
        }) 
       } 
      </ul> 
     </div> 
    ); 
} 

export default Menu;