React移除列表项后无法重新添加同一项的问题求助

核心问题分析 #

• 选中值未用状态维护：你用let id普通变量存储下拉框选中的食物名称，但React组件每次重渲染（比如调用setMeal后）都会重新执行组件函数，这个变量会被重置为undefined。移除项后组件重渲染，此时下拉框虽显示选中状态，但id已丢失，点击添加时找不到对应食物。
• 移除函数拼写错误：removeItem里的setMeal(NewList)是大写N，正确应为newList，这个错误会导致移除后状态更新失败。
• 添加逻辑冗余且有缺陷：嵌套循环遍历foods和meal效率低，且直接使用当前meal状态调用setMeal，异步更新场景下可能拿到旧状态。

修复后的完整代码 #

import { useState } from 'react';
import foods from 'json/foods';
import { IoIosRemoveCircle } from 'react-icons/io';

const MealComponent = () => {
    // 用useState维护选中的食物ID（推荐用ID而非name，避免同名冲突）
    const [selectedFoodId, setSelectedFoodId] = useState('');
    const [meal, setMeal] = useState([]);

    // 更新选中的食物ID
    const updateValue = (event) => {
        setSelectedFoodId(event.target.value);
    };

    // 移除指定ID的食物
    const removeItem = (id) => {
        const newList = meal.filter((item) => item.id !== id);
        setMeal(newList);
    };

    // 添加选中的食物到meal数组
    const addItem = () => {
        if (!selectedFoodId) {
            console.log('请先选择食物');
            return;
        }
        // 根据ID找到选中的食物
        const selectedFood = foods.find(food => food.id === selectedFoodId);
        if (!selectedFood) return;

        // 检查是否已存在（用ID判断更准确）
        const isExist = meal.some(item => item.id === selectedFoodId);
        if (isExist) {
            console.log('不能添加重复项');
            return;
        }

        // 使用函数式更新确保拿到最新的meal状态
        setMeal(prevMeal => [...prevMeal, selectedFood]);
    };

    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>
                            <IoIosRemoveCircle onClick={() => removeItem(item.id)} />
                        </div>
                    </div>
                ))}
            </div>
            <div>
                <select onChange={updateValue} value={selectedFoodId}>
                    <option value="">请选择食物</option>
                    {foods.map((food) => (
                        <option key={food.id} value={food.id}>{food.name}</option>
                    ))}
                </select>
                <button onClick={addItem}>Add</button>
            </div>
        </div>
    );
};

export default MealComponent;

关键修复点说明 #

1. 用useState维护选中状态：替换普通变量为状态selectedFoodId，确保组件重渲染后选中值不丢失，同时给下拉框设置value={selectedFoodId}，让选中状态与状态变量同步。
2. 修正移除函数拼写错误：将NewList改为newList，保证状态正确更新。
3. 优化添加逻辑：
   • 先判断是否选中食物，避免空操作
   • 用find根据ID快速定位选中食物，替代嵌套循环
   • 用some检查重复项，逻辑更清晰
   • 使用函数式更新setMeal(prevMeal => [...prevMeal, selectedFood])，确保每次添加都基于最新的meal状态
4. 用ID而非name匹配：下拉框value设为食物ID，避免同名食物导致的匹配错误，判断重复也用ID，更可靠。

修改后，移除某一项后下拉框的选中状态会与selectedFoodId保持同步，点击添加按钮时能正确找到对应食物，即可立即重新添加该项。

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