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

Question

我正在通过开发应用程序来学习 reactjs。我做得很好，没有问题。但是，当我尝试根据蔬菜和非蔬菜等类别列出菜单/餐点时，我现在遇到了一个问题。我正在使用 lodash 的过滤器功能，在控制台中我看到我的过滤器功能正常工作，但如果有蔬菜餐，它会给我 true 否则为 false。但我不想要 true 和 false 的输出，而是我希望所有属于蔬菜和非蔬菜的餐点都是这样的:

Veg

mushroom-drumstick

Non-veg

Chicken Momo Chicken BBQ

这是我的代码

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 View 生成一个 _ .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;