You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.17 14:01:04