在 Arrays 的嵌套對象中更新 State

Question

我現在正在學習 React，但我遇到了一個問題現在我正在開發一個小測驗應用程序。 問題和答案來自 API。

State

const [questions, setQuestions] = React.useState([])

這就是 state Object 的樣子

[{question: "Qeustion1?", 
answers: [
{value: "answer1", selected: false, id: 1}, 
{value: "answer2", selected: false, id: 2}, 
{value: "answer3", selected: false, id: 3},
{value: "answer4", selected: false, id: 4}]
}]

我想將所選屬性更改為 true，如果單擊的字段 ID 與 state ID 匹配，那么我可以更改所選答案字段的顏色。 但不知何故，我在嘗試更改屬性時總是會出錯。

    function selectAnswer(id) {
        setQuestions(prev => {
            prev.forEach(element => {
                element.answers.map(answer => {
                    return id === answer.id ? {...answer, selected: !answer.selected} : answer
                })
            })
        })
} 

更新錯誤消息錯誤：未知錯誤（ /node_modules/react-dom/cjs/react-dom.development.js:237 ）

也許有人可以幫助我。

Answer 1

如果您使用 state 更新的 function 形式，它應該返回新的 state 值，例如。 setCount(count=>count+1)或更明確setCount(count=>{ return count+1})

您的 state 更新 function 永遠不會得到返回值

此外，forEach 方法不返回新數組。 用 map 替換 forEach 實現

如果每次問題數組中每個問題的四個選項的 ID 為 1、2、3、4，您將遇到更多問題。 您還必須確定當前正在回答哪個問題。