React菜单动态渲染与购物车子类商品数量显示问题求助

问题回顾 #

现有一个menu数组，包含2类主食品，每类下有多个子类商品。原本的实现是用Card组件嵌套Mob组件展示子类，但Mob调用购物车的getProductQuantity时传入的是主食品id，导致无法正确显示子类商品的购物车数量。后来尝试在外层menu.map中嵌套types.map生成Card，结果生成了5个Card（对应所有子类数量），不符合仅渲染2个主Card的预期。

原错误代码：

menu.map((food) => (
  food.types.map((type)=>(
   <Card
         Title={food.title}
         Likes={food.likes}
         Id={food.id}
         SubId={type.subid}
   />
  ))
))

解决方案 #

核心逻辑是：外层仅遍历menu生成2个主Card，将每类食品的types数组作为props传给Card，在Card内部遍历types渲染对应的Mob组件，这样既保证Card数量正确，又能让每个Mob拿到对应的子类subid。

1. 修改外层渲染代码 #

只遍历menu数组生成主Card，传入主食品信息和对应的子类列表：

menu.map((food) => (
  <Card
    key={food.id}
    title={food.title}
    likes={food.likes}
    types={food.types}
  />
))

2. 调整Card组件内部逻辑 #

在Card组件中，接收types数组并遍历，为每个子类渲染Mob组件，同时传入subid等子类信息：

const Card = ({ title, likes, types }) => {
  return (
    <div className="food-card">
      <h3>{title}（点赞数：{likes}）</h3>
      {/* 内部遍历子类列表渲染Mob */}
      {types.map((type) => (
        <Mob
          key={type.subid}
          subId={type.subid}
          subtitle={type.subtitle}
          price={type.price}
        />
      ))}
    </div>
  );
};

3. 更新Mob组件的购物车调用 #

在Mob组件中，使用传入的subId调用购物车方法，获取对应子类的数量：

const Mob = ({ subId, subtitle, price }) => {
  // 用子类subid替代原主食品id
  const cartQuantity = getProductQuantity(subId);
  return (
    <div className="food-subtype">
      <span>{subtitle} - ￥{price}</span>
      <span>购物车数量：{cartQuantity}</span>
    </div>
  );
};

这样调整后，既能渲染出预期的2个主Card，每个Card下展示对应的子类商品，同时Mob组件能通过subid正确获取购物车中该子类商品的数量。

内容的提问来源于stack exchange，提问作者Daniel Sanchez Islas