我的 Filter 和 Map 函数有什么问题，因为它没有在我的 React Component 中过滤正确的项目？

Question

这是我的菜单项，我只想过滤饮料组件中的饮料，我在类别下同时显示 'Drinks' 和 'Eat'。我的目标是只过滤和提取 'Drinks'，因为我在自己的组件上显示饮料。

这是我的数据：

const MenuItems: MenuItems[] = [
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Coffee",
    description: "A blend of coffee beans from La Bolsa in Colombia.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "OJ",
    description: "Cold pressed and freshely squeezed orange juice.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Tea",
    description: "Cold pressed and freshely squeezed orange juice.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Iced",
    description: "Choice of Earl Grey, GreenTea, Chamomile, or Peppermint.",
  },
  {
    category: "Drinks",
    price: 4,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Latte",
    description: "2 shots of espresso served with steamed milk of choice.",
  },
  {
    category: "Eats",
    price: 14,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "FCC Classic",
    description:
      "Three cage-free eggs cooked any style and with bacon. Includes hash browns and toast.",
  },
  {
    category: "Eats",
    price: 14,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "3 Egg Omelet",
    description:
      "Three cage-free eggs with Mushrooms, Peppers, Onions. Served with hash browns and toast.",
  },
  {
    category: "Eats",
    price: 14,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Corned Beef Hash",
    description:
      "Our signature shredded hash mixed with grass-fed, dry-rubbed, corned beef, caramelized poblanos and onions, topped with two cage-free eggs; your style, & toast.",
  },
  {
    category: "Eats",
    price: 12,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "OMG French Toast!",
    description:
      "Fresh brioche stuffed with mascarpone and topped with vanilla crème, caramel, fresh strawberries, and toasted coconut.",
  },
  {
    category: "Eats",
    price: 9,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Buttermilk Pancakes",
    description:
      "Buttermilk pancakes topped with whipped butter and powdered sugar served with Slopeside Pure Vermont Maple Syrup.",
  },
  {
    category: "Eats",
    price: 12,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "FCC Ham Benedict",
    description:
      "Our Signature English muffin topped with fresh smashed avocado, Parmesan cheese, ripened tomatoes, two poached cage free-eggs, smoked cheddar hollandaise and everything spice.",
  },
  {
    category: "Eats",
    price: 12,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Avocado Benny",
    description:
      "Our Signature English muffin topped with fresh smashed avocado, Parmesan cheese, ripened tomatoes, two poached cage free-eggs, smoked cheddar hollandaise and everything spice.",
  },
  {
    category: "Eats",
    price: 13,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "FCC Avocado Toast",
    description:
      "Rustic bread toasted with olive oil, smashed avocado, onion honey jam, and roasted tomato. Topped with two cage-free sunny side up eggs with a side Dijon citronette, Spiced Pepitas & Parmesan-dressed greens.",
  },
  {
    category: "Eats",
    price: 12,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Veggie Smash",
    description:
      "Griddled, smashed sweet potatoes, a cage-free poached egg, avocado, pickled onions, paprika, drizzled with black pepper maple syrup and topped with our asparagus mushroom salad.",
  },
  {
    category: "Eats",
    price: 13,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Garden Omelet",
    description:
      "Three cage-free eggs with sauteed asparagus, mushrooms, zucchini and red bell peppers. Topped with chili-lime seasoned avocado and goat cheese.",
  },
  {
    category: "Eats",
    price: 12,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1634070429/test.jpg",
    name: "Tofu Veggie Scramble",
    description:
      "Tofu seasoned with onion powder, salt & pepper; scrambled with choice of three fillings, served with hash browns and toast.",
  },
];
export default MenuItems;
interface MenuItems {
  category: string;
  price: number;
  url: string;
  name: string;
  description: string;
}

这是我的饮料组件

import MenuItems from "./MenuItems";

const Drinks = (props) => {
  return <div>{props.MenuItems.name} </div>;
};

export default Drinks;

这是我的主菜单组件，以及我的地图和过滤器功能。


      <div>
        {MenuItems.filter((item) => "Drinks").map((item) => {
          return <Drinks MenuItems={item} />;
        })}
      </div>

输出：

咖啡公关茶冰镇拿铁 FCC 经典 3 鸡蛋煎蛋卷咸牛肉哈希天哪，法式吐司！酪乳薄煎饼 FCC火腿班尼迪克鳄梨班尼 FCC鳄梨吐司素食粉碎花园煎蛋卷豆腐素炒

只想显示“饮料”，而不是“吃”。

Answer 1

MenuItems.filter((item) => "Drinks") return 总是 true

你应该做的是将类别与饮料进行比较。

MenuItems.filter((item) => item.category === "Drinks")

我的 Filter 和 Map 函数有什么问题，因为它没有在我的 React Component 中过滤正确的项目？

What is wrong with my Filter and Map function as its not filtering the correct item inside my React Component?

jsx

typescript

reactjs