React，在嵌套的对象数组中使用.map()和扩展操作符更新状态

Question

我仍然是React的新手，我已经为上面提到的主题挣扎了一段时间。我得到的状态是这样的:

const [questions, setQuestions] = React.useState([])    
React.useEffect(()=>{
fetch('https://the-trivia-api.com/api/questions?limit=5&difficulty=medium').then((response)=>response.json()).then((data)=>{
let questionsData = data.map((item) => {
return {
id: nanoid(),
questionText: item.question,
answerOptions: [
{id: nanoid(), answerText: item.correctAnswer, isCorrect: true, selected: false,},
{id: nanoid(), answerText: item.incorrectAnswers[0], isCorrect: false, selected: false,},
{id: nanoid(), answerText: item.incorrectAnswers[1], isCorrect: false, selected: false,},
{id: nanoid(), answerText: item.incorrectAnswers[2], isCorrect: false, selected: false,},
].sort(()=>Math.random() -0.5),
};
})
setQuestions(questionsData)
})

}, [])

它是一个状态，返回给我一个测验问题和4 "randomized"按钮。我要做的是更新状态，使其中一个answerOptions(即按钮)从selected: false到selected: true。我确信。map和spread运算符是可行的但我对

的语法有些困惑selectAnswer是由子组件的单选按钮的onChange触发的。我可以访问问题id和每个answerOptions id，所以访问这些不是问题。我只是想不出该如何回报国家。下面是我尝试这样做失败的例子。

function selectAnswer(answerId, questionId){
setQuestions(prevData => prevData.map((item)=>{
return item.answerOptions.map((answerItem)=>{
if(answerId === answerItem.id) {
return {...item, [answerOptions[answerItem].selected]: !answerOptions[answerItem].selected}
} else return {...item}
})
}))
}

感谢您的宝贵时间

Answer 1

function selectAnswer(answerId, questionId) {
setQuestions((prevData) =>
prevData.map((item) => ({
...item,
answerOptions: item.answerOptions.map((answerItem) => ({
...answerItem,
selected: answerId === answerItem.id,
})),
}))
);
}

Answer 2

与最初的问题没有直接关系，但我建议您阅读react文档中关于如何使用useEffect获取数据的这一部分