使用useState Hook更新对象数组：去重并累加重复项数量

首先简化获取目标餐品的逻辑：因为id是唯一标识，用Array.find()比filter()更高效，直接返回匹配对象而非数组，无需再取[0]：

const food = MEALS.find(item => item.id === id);
// 增加判断，避免传入无效id导致后续报错
if (!food) return;

接下来用单个setOrder实现需求，核心是基于之前的状态prev生成新数组：

const onSubmitHandler = (e, id) => {
  e.preventDefault();
  const food = MEALS.find(item => item.id === id);
  if (!food) return;

  setOrder(prev => {
    // 检查订单中是否已存在该餐品
    const existingItem = prev.find(item => item.id === id);
    if (existingItem) {
      // 存在则遍历数组，更新对应项的qty，其余项保持原样
      return prev.map(item => 
        item.id === id 
          ? {...item, qty: item.qty + qty} 
          : item
      );
    } else {
      // 不存在则将带qty的餐品添加到数组
      return [...prev, {...food, qty: qty}];
    }
  });
};

你之前尝试代码的问题说明 #

你之前的写法里，prev.map()执行后没有保存结果，直接返回[...prev, 新项]，导致不管餐品是否已存在，都会重复添加新项。同时map()只处理了匹配的情况，未匹配的项没有返回原对象，会生成包含undefined的无效数组，这是核心错误。

额外优化点 #

• 用find()替代filter()获取目标餐品，减少数组操作冗余
• 添加!food判断，避免无效id引发的报错
• 直接扩展food对象添加qty属性，无需手动复制id、name、price，减少重复代码

内容的提问来源于stack exchange，提问作者Stratho