如何为对象嵌套数组中的内层multiple数组追加新元素？

原对象结构 #

let obj= {
  title:"my form",
  endTIme:"2/20/22",
  mainList:[
    {
      type:"multiple", 
      checked:false,
      multiple:[
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

需求 #

点击按钮时保留所有字段值，仅给mainList里第一个元素的multiple数组追加一个新对象，最终结构如下：

let obj = {
  title: "my form",
  endTIme: "2/20/22",
  mainList: [{
    type: "multiple",
    checked: false,
    multiple: [
    {
      optionCheck: false,
      optionAnswer: ""
    }, 
    {
      optionCheck: false,
      optionAnswer: ""
    }]
  }]
};

你之前的错误 #

你写的代码是给mainList数组追加了一个新元素，而不是修改现有元素的multiple数组，导致mainList元素重复：

let newObj= {
 ...obj
  mainList:[
     ...obj.mainList,
    {
      multiple:[
         {
           optionCheck: false,
           optionAnswer:""
         }
      ]
    }
  ]
}

正确实现代码 #

const newObj = {
  ...obj,
  mainList: obj.mainList.map((item, index) => {
    // 只处理mainList里的第一个元素
    if (index === 0) {
      return {
        ...item,
        // 给当前元素的multiple数组追加新对象
        multiple: [
          ...item.multiple,
          { optionCheck: false, optionAnswer: "" }
        ]
      };
    }
    // 其他元素直接拷贝保留原结构
    return { ...item };
  })
};

代码说明 #

• 用...obj复制原对象的顶层属性，确保title、endTIme不变。
• 遍历mainList，对目标元素（这里是第一个）进行深一层的拷贝：保留它的type、checked，同时扩展multiple数组，加入新的选项对象。
• 如果mainList里有多个元素，需要按type筛选目标元素，可以把判断条件改成if (item.type === "multiple")，这样不管位置在哪，只要是多选类型的元素都会被修改。

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