React中使用.map()和扩展运算符更新嵌套对象数组状态

你之前的写法主要问题是嵌套map的逻辑顺序错误，同时修改属性的语法有误。以下是正确的selectAnswer函数实现：

function selectAnswer(answerId, questionId) {
  setQuestions(prevData => prevData.map(question => {
    // 不是目标题目，直接返回原对象
    if (question.id !== questionId) {
      return question;
    }
    // 找到目标题目，更新其选项列表
    return {
      ...question,
      answerOptions: question.answerOptions.map(answer => {
        // 匹配到目标选项时，切换selected状态；否则返回原选项
        return answer.id === answerId 
          ? { ...answer, selected: !answer.selected }
          : answer;
      })
    };
  }));
}

逻辑拆解 #

1. 遍历题目列表：外层map遍历所有题目，只对匹配questionId的题目进行修改，其他题目直接返回，保证状态的不可变性。
2. 复制题目对象：用扩展运算符...question复制原题目，避免直接修改原状态对象。
3. 更新选项列表：内层map遍历当前题目的所有选项，找到匹配answerId的选项，复制该选项并切换selected属性，其他选项保持原样。

之前的错误点 #

• 嵌套map顺序错误：外层遍历题目后，直接返回了选项的map结果，导致整个questions数组结构被破坏。
• 属性修改语法错误：[answerOptions[answerItem].selected]这种写法不符合对象属性更新的语法，应该直接指定selected属性名并修改其值。

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