如何通过State清空字典？React状态点击后无法恢复正常的问题求助

我写了修改State的函数，subj是Subjects的初始副本，但点击后状态无法恢复到初始状态再更新，状态没有变化。

原代码 #

初始副本与修改函数 #

let subj  = {
    "Mathematics": false,
    "Physics": false,
    "Ukranian": false,
    "English": false,
    "Chemistry": false,
    "Informatics": false,
    "History": false
}
function ref(sub) {
    console.log({...Subjects})
    SetSubjects({Subjects: subj})
    SetSubjects({...Subjects, [sub]: true})
};

State定义 #

const [Subjects, SetSubjects] = useState({
    "Mathematics": false,
    "Physics": false,
    "Ukranian": false,
    "English": false,
    "Chemistry": false,
    "Informatics": false,
    "History": false
})

错误原因 #

1. 状态更新格式错误：SetSubjects({Subjects: subj})会把State改成嵌套结构{Subjects: {...初始科目}}，和原本直接键值对的State结构完全不符，后续更新会基于错误结构操作，导致状态异常。
2. 批量更新覆盖问题：React会批量处理连续的状态更新，第二次调用SetSubjects时，使用的是更新前的旧Subjects值，且会直接覆盖第一次的重置操作，相当于只执行了第二次更新，没有完成重置。

修复方案 #

直接在一次状态更新中完成“重置为初始状态+修改指定科目”的操作，确保结构正确且更新生效：

function ref(sub) {
    // 复制初始副本，修改指定科目后更新状态
    const updatedSubjects = {...subj};
    updatedSubjects[sub] = true;
    SetSubjects(updatedSubjects);
}

如果需要基于最新状态做重置（比如subj不是固定初始值时），可以用函数式更新获取最新状态：

function ref(sub) {
    SetSubjects(() => {
        const updatedSubjects = {...subj};
        updatedSubjects[sub] = true;
        return updatedSubjects;
    });
}

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