Apabila saya mengklik OnClick(SetState) untuk kali kedua saya mendapat ralat, apakah yang perlu saya lakukan?

Question

Apabila saya mengklik pada <a onClick{() => "function"}> untuk kali pertama, semuanya baik-baik saja, tetapi apabila saya mengklik untuk kali kedua, semuanya rosak. Di sini saya mendapat kod:

function ref(sub) {
    console.log(Subjects)
    SetSubjects(Subjects[sub] = true)
    console.log(Subjects)
};

const [Subjects, SetSubjects] = useState({
    "Mathematics": false,
    "Physics": false,
    "Ukranian": false,
    "English": false,
    "Chemistry": false,
    "Informatics": false,
    "History": false
})
return (
        <div className="area">
            <div className="logo_header"><a className="logo_header_text" href="/">Owly</a></div>
            <h1 className="tittle">Choose the Subject</h1>
            <div className="select_btns">
                <a onClick={() => ref("Mathematics")} >Mathematics</a>
                <a onClick={() => ref("Physics")} >Physics</a>
                <a onClick={() => ref("Ukranian")} >Ukranian</a>
                <a onClick={() => ref("English")} >English</a>
                <a onClick={() => ref("Chemistry")}>Chemistry</a>
                <a onClick={() => ref("Informatics")}>Informatics</a>
                <a onClick={() => ref("History")}>History</a>
            </div>

Di sini saya mempunyai skrin Klik pertama:

Klik kedua:

Tidak kira butang mana yang saya pilih

Answer 1

Ini tidak seperti yang anda fikirkan:

SetSubjects(Subjects[sub] = true)

Ekspresi Subjects[sub] = true 的结果是值 true，因此您将 Subjects 设置为值 true。当然，它不具有您期望从 Subjects Sebarang harta yang diperolehi oleh objek.

Saya syak anda sedang mencari ini:

SetSubjects({ ...Subjects, [sub]: true })

Ini akan Subjects 设置为包含当前 Subjects 上所有属性的对象，并将 sub 中的值定义的属性设置为 true.