React嵌套循环修改对象属性异常:仅返回options数组而非完整对象
问题解决:React中更新选择题选项状态时丢失父对象属性
你的问题出在外层map的返回值错误:遍历每个question时,你直接返回了question.options.map()的结果,这相当于把整个question对象替换成了它的options数组,自然丢失了question、correctAnswer等核心属性。
修正后的代码如下:
function selectAnswers(id) { setQestions(prevQuestions => { return prevQuestions.map(question => { // 解构原question的所有属性,仅替换options数组 return { ...question, options: question.options.map(answer => { return answer.id === id ? { ...answer, isSelected: !answer.isSelected } : answer; }) }; }); }); }
关键逻辑说明:
- 对每个question对象,先通过
...question解构保留原有的所有属性(question、correctAnswer等) - 单独更新
options属性:遍历选项数组,找到对应id的选项并切换isSelected状态,其他选项保持原样 - 最终返回的是完整的question对象,而非仅options数组,这样就不会丢失任何属性
如果需要实现单选逻辑(同一道题只能选一个选项),可以把options的map逻辑改成:
options: question.options.map(answer => { return answer.id === id ? { ...answer, isSelected: true } : { ...answer, isSelected: false }; })
内容的提问来源于stack exchange,提问作者ahmed hussin
相关产品推荐
相关产品推荐

