React多复选框处理问题：取消勾选无法移除最后一项

你的问题出在handleOnChange的取消勾选逻辑里：

• 你操作的是初始化数据的拷贝newData，而非当前已选中的purchaseTypes数组
• splice(i,1)返回的是被删除的元素组成的数组，不是删除后的剩余数组，这会导致取消最后一项时，state被错误设置为仅包含被删除项的数组，而非空数组

修复后的核心代码 #

修正handleOnChange函数

const handleOnChange = (e, item) => { // 直接传递item，用id匹配比索引更可靠
    const { checked } = e.target;
    if (checked) {
        // 避免重复添加同一选项
        setPurchaseTypes(prev => {
            if (!prev.find(p => p.id === item.id)) {
                return [...prev, item];
            }
            return prev;
        });
    } else {
        // 从已选中列表中过滤掉当前项
        setPurchaseTypes(prev => prev.filter(p => p.id !== item.id));
    }
}

修复复选框与label的关联问题

原代码中input的id和label的htmlFor不匹配，导致点击label无法触发复选框，同时用item.id作为key比索引更稳定：

{purchaseInitData.map((item) => {
    return (
        <div className="flex items-center mb-2" key={item.id}>
            <input 
                type="checkbox" 
                id={`purchase-checkbox-${item.id}`} 
                name={item.name} 
                onChange={(e) => handleOnChange(e, item)}
                // 可选：添加checked状态，保持复选框与state同步
                checked={purchaseTypes.some(p => p.id === item.id)}
            />
            <label htmlFor={`purchase-checkbox-${item.id}`} style={{ marginLeft: '15px' }}>
                {item.label}
            </label>
        </div>
    )
})}

关键修复点说明 #

• 取消勾选时，通过filter操作purchaseTypes的前状态，确保操作的是已选中的列表，而非原初始化数据
• 用item.id匹配选项，避免数组排序、新增/删除导致的索引错位问题
• 修复label与input的关联，提升交互体验
• 增加重复判断，防止同一选项被多次添加到state中

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