React setState修改双层嵌套数组对象属性报错求助

现有基础代码 #

之前用于修改「对象-数组-对象」层级属性的onChange逻辑：

onChange={(e) => setQuiz({ ...quiz, questions: quiz.questions.map((child, index) => index === selectedQuestion ? { ...child, question: e.target.value } : child) })} />

需要处理的复杂嵌套结构 #

现在要修改更复杂的多层嵌套结构：quiz对象包含questions数组，数组元素是question对象；每个question对象又包含answers数组，数组元素是answer对象，最终要修改answer中的content属性。结构如下：

{
  quiz: {
    questions: [
      {
        answers: [
          {
            content: '' // 要修改的目标属性
          }
        ]
      }
    ]
  }
}

错误代码及报错信息 #

自行编写的代码（存在语法错误）：

onChange={(e) => 
   setQuiz({ ...quiz, questions: 
        quiz.questions.map((child, index) => index === selectedQuestion ? { 
             child.map((answer, x)) => x === selectedAnswer ? {
                 ...child, content: e.target.value } : child)  }
             : child) 
   })
} />

对应的语法错误信息：

26 |                         setQuiz({ ...quiz, questions: 
27 |                             quiz.questions.map((child, index) => index === selectedQuestion ? 
28 |                                 { child.map((answer, x)) => x === selectedAnswer ? 
    |                                        ^
29 |                                     { ...child, content: e.target.value } : child)  }
30 |                                     : child) })} />
31 |                 </div>

错误分析与正确实现 #

错误点说明 #

1. 语法错误：child.map((answer, x))多了一个闭合括号，且child是question对象，要遍历的是它的answers数组，而非child本身，正确写法应为child.answers.map((answer, x)
2. 逻辑错误：目标修改的是answer的content，但错误代码里展开的是child（question对象），应该展开answer对象
3. 结构错误：选中question后，需要先展开question对象，再替换它的answers属性，而非直接在question对象内写map逻辑

正确代码实现 #

onChange={(e) => 
  setQuiz({
    ...quiz,
    questions: quiz.questions.map((question, qIndex) => {
      if (qIndex !== selectedQuestion) return question;
      return {
        ...question,
        answers: question.answers.map((answer, aIndex) => {
          if (aIndex !== selectedAnswer) return answer;
          return { ...answer, content: e.target.value };
        })
      };
    })
  })
}

代码逻辑说明 #

1. 首先展开quiz对象，保留其他未修改的属性
2. 遍历questions数组，判断当前question是否为选中目标：
   • 不是则直接返回原question对象
   • 是则展开该question对象，重新处理它的answers数组
3. 遍历answers数组，判断当前answer是否为选中目标：
   • 不是则直接返回原answer对象
   • 是则展开该answer对象，修改content属性为输入值

内容的提问来源于stack exchange，提问作者ABpositive