React中useState点击两次触发SetState异常问题求助

问题根源 #

你的代码里有两个致命错误导致了功能崩溃：

1. 直接修改原始状态对象：Subjects[sub] = true 直接修改了useState返回的原始状态对象，违反了React状态不可直接修改的核心原则。
2. 错误的状态更新值：SetSubjects(Subjects[sub] = true) 中，赋值表达式的返回值是true，所以第一次点击后，你的Subjects状态会从原本的对象直接变成布尔值true。第二次点击时，Subjects已经是布尔值，再尝试访问Subjects[sub]自然会失败，导致所有功能崩溃。

修复后的代码 #

1. 修正状态更新逻辑

将状态更新改为不可变更新，使用函数式更新确保获取最新的状态值：

function ref(sub) {
    // 用函数式更新获取前一次状态，创建新对象覆盖指定属性
    SetSubjects(prevSubjects => ({
        ...prevSubjects, // 复制原对象所有属性
        [sub]: true      // 将目标科目设为true
    }));
};

2. 优化标签的行为（可选但推荐）

因为你用标签做按钮，默认会触发页面跳转，建议阻止默认行为，或者直接改用标签（语义更准确）：

// 阻止<a>默认跳转
<a onClick={(e) => {
    e.preventDefault();
    ref("Mathematics");
}} href="#">Mathematics</a>

// 或者改用<button>
<button onClick={() => ref("Mathematics")}>Mathematics</button>

额外提示 #

如果需要的是切换科目选中状态（而不是一直设为true），可以把[sub]: true改成[sub]: !prevSubjects[sub]即可实现点击切换。

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