reactjs 我的过滤和Map功能有什么问题,因为它没有过滤我的React组件内的正确项目?

svgewumm  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(111)

这是我的菜单项,我只想过滤饮料组件中的饮料,我在类别下显示“饮料”和“吃”。我的目标是只过滤和提取“饮料”,因为我在它自己的组件上显示饮料。
以下是我的数据:

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;

这是我的主菜单组件,以及Map和过滤函数。

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

输出:
咖啡OJ茶冰拿铁FCC经典3蛋煎蛋卷咸牛肉哈希OMG法国吐司!酪乳煎饼FCC火腿本尼迪克特鳄梨本尼FCC鳄梨吐司蔬菜粉碎花园煎蛋卷豆腐蔬菜炒
只想看“饮料”,而不是“吃的”。

db2dz4w8

db2dz4w81#

MenuItems.filter((item) => "Drinks")始终返回true
你应该做的是比较类别的饮料。
MenuItems.filter((item) => item.category === "Drinks")

相关问题