react 中因 `
在你提供的代码中，问题并非出在 useState 更新逻辑或 filter 删除方式上，而是一个经典但容易被忽略的 DOM 行为陷阱：<select> 元素的 onChange 事件仅在选项值实际发生变化时触发。当你已选中某项（如 "Chicken Breast"），再点击同一项，event.target.value 未改变，因此 updateValue 不执行，id 变量仍为旧值（甚至可能是 undefined 或残留值），导致后续添加逻辑失效。
更严重的是，你的当前实现存在多个非 React 推荐的反模式：
- 使用全局变量 id 而非 React 状态，造成闭包和竞态风险；
- removeItem 中拼写错误：setMeal(NewList) → 应为 setMeal(newList)（大小写错误）；
- 添加逻辑嵌套双层循环且依赖外部 id，可读性差、性能低（O(n×m)）；
- meal.concat(foods[i]) 是函数式写法，但未避免重复添加校验的竞态（因 meal 是旧快照）。
✅ 正确解法：将 <select> 改为受控组件，并在 Add 按钮中直接读取 select 的当前值（而非依赖 onChange 设置的 id）
以下是优化后的完整实现：
import React, { useState } from 'react';
import foods from 'json/foods';
const MealManager = () => {
const [meal, setMeal] = useState([] as typeof foods);
const [selectedFoodId, setSelectedFoodId] = useState<string>(''); // ✅ 受控状态
const removeItem = (id: string) => {
setMeal(prev => prev.filter(item => item.id !== id));
};
const handleAdd = () => {
if (!selectedFoodId) return;
const foodToAdd = foods.find(f => f.id === selectedFoodId);
if (!foodToAdd) return;
// ✅ 防重复：检查当前 meal 中是否已存在同 id 项（推荐用 id 判断，而非 name）
if (meal.some(item => item.id === foodToAdd.id)) {
alert(`"${foodToAdd.name}" is already in the list.`);
return;
}
setMeal(prev => [...prev, foodToAdd]); // ✅ 函数式更新，确保基于最新状态
};
return (
<div>
{/* 渲染已选餐食 */}
<div>
{meal.map((item) => (
<div key={item.id}>
<h2>{item.name}</h2>
<div>
<p>Protein: {item.protein}</p>
<p>Fats: {item.fats}</p>
<p>Carbs: {item.carbs}</p>
<button onClick={() => removeItem(item.id)}>Remove</button>
</div>
</div>
))}
</div>
{/* 添加区域：受控 select + 明确 Add 按钮 */}
<div>
<select
value={selectedFoodId}
onChange={(e) => setSelectedFoodId(e.target.value)}
>
<option value="">— Select a food —</option>
{foods.map((food) => (
<option key={food.id} value={food.id}>
{food.name}
</option>
))}
</select>
<button onClick={handleAdd}>Add</button>
</div>
</div>
);
};
export default MealManager;? 关键改进说明：
- 受控组件：select 的 value 绑定到 selectedFoodId 状态，onChange 同步更新——确保状态始终与 UI 一致；
- Add 按钮职责清晰：不再依赖外部 id 变量，而是直接使用 selectedFoodId 查找并添加，规避了 onChange 不触发的盲区；
- 去重逻辑健壮：使用 item.id（唯一标识）而非 item.name 判断重复，避免名称冲突风险；
- 函数式更新：setMeal(prev => [...prev, ...]) 确保在异步渲染中获取最新 meal 快照，防止重复添加漏判；
- 移除拼写错误与副作用：修复 NewList → newList，消除全局变量 id 带来的不可预测行为。
? 额外建议：
- 若数据量大，可用 Set 预存已存在 id 提升去重性能；
- 添加空状态提示（如 “No meals added yet”）提升 UX；
- 对 foods 数据源做类型守卫（如 TypeScript 接口），避免运行时 undefined 错误。
遵循以上模式，你将彻底解决“删后不能立刻重加”的问题，并写出更可维护、符合 React 最佳实践的代码。
