Question

我正在通过开发应用程序来学习reactjs。没有问题，我做得很好。但是，当我尝试根据veg和non-veg等类别列出菜单/餐时，我遇到了一个问题。我正在使用lodash的过滤功能，并且在控制台中我看到我的过滤功能正常工作，但如果有蔬菜餐，它给我真实的其他错误。但我不希望输出为真和假，而是我希望所有的食物都属于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视图，使_.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;

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

1 个答案: