react 中因 `
在你提供的代码中，问题并非出在 useState 更新逻辑或 filter 删除方式上，而是一个经典但容易被忽略的 DOM 行为陷阱：
更严重的是，你的当前实现存在多个非 React 推荐的反模式：
- 使用全局变量 id 而非 React 状态，造成闭包和竞态风险；
- removeItem 中拼写错误：setMeal(NewList) → 应为 setMeal(newList)（大小写错误）；
- 添加逻辑嵌套双层循环且依赖外部 id，可读性差、性能低（O(n×m)）；
- meal.concat(foods[i]) 是函数式写法，但未避免重复添加校验的竞态（因 meal 是旧快照）。
✅ 正确解法：将
以下是优化后的完整实现：
import React, { useState } from 'react';
import foods from 'json/foods';
const MealManager = () => {
const [meal, setMeal] = useState([] as typeof foods);
const [selectedFoodId, setSelectedFoodId] = useState(''); // ✅ 受控状态
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 (
);
};
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 最佳实践的代码。
