使用勾选框操作state中Set时删除元素后状态更新异常求助

核心问题点 #

• 变量作用域错误：checkedItemId 仅在勾选分支内用 var 声明，触发取消勾选逻辑时该变量未赋值，实际执行的是删除 undefined 操作，根本没有命中你要删除的目标条目，所以Set的size不会变化。你单独测试 set.has(setItem) 返回false是因为你测试时手动传入了正确的ID，和代码实际运行逻辑不一致。
• 原地修改状态：你直接对state中的Set实例执行add/delete操作，属于原地变更，不符合React状态不可变的更新规范，容易引发渲染异常、状态不同步的问题。

修复后代码 #

const handleChange = (e) => {
    // 统一提前获取当前操作的条目ID
    const checkedItemId = parseInt(e.target.value)
    if (e.target.checked) {
        // 基于最新状态拷贝后添加新值
        setCheckedItems(prev => new Set(prev).add(checkedItemId))
    } else {
        // 基于最新状态拷贝后删除目标值
        setCheckedItems(prev => {
            const newSet = new Set(prev)
            newSet.delete(checkedItemId)
            return newSet
        })
    }
}

修复说明 #

1. 将ID获取逻辑提到分支外，确保取消勾选时也能拿到正确的待删除ID，避免删除无效值的问题。
2. 采用函数式更新获取最新的状态快照，避免闭包陷阱导致拿到旧状态。
3. 所有修改都在新拷贝的Set实例上执行，完全不修改原state的Set，符合React不可变更新的要求，状态更新会可靠触发渲染同步。

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