在 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，您将遇到更多问题。 您还必须确定当前正在回答哪个问题。