根据使用过滤器的类别显示项目

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;