當我第二次點擊 OnClick(SetState) 時出現錯誤，我該怎麼辦？

Question

當我第一次點擊 <a onClick{() => "function"}> 時，一切都很好，但是當我第二次點擊時，一切都中斷了。 這裡我得到了程式碼：

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>

這裡我有螢幕 第一次點擊：

第二次點選：

我選擇哪個按鈕並不重要

Answer 1

這並沒有按照您的想法進行：

SetSubjects(Subjects[sub] = true)

表達式Subjects[sub] = true 的結果是值true，因此您將Subjects 設定為值true。當然，它不具有您期望從 Subjects 物件獲得的任何屬性。

我懷疑您正在尋找這個：

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

這會將Subjects 設定為包含目前Subjects 上所有屬性的對象，並將sub 中的值定義的屬性設為 true。