JavaScript如何正确合并嵌套动态对象生成预期层级结构

原有逻辑的核心错误在else分支：只要当前parentEle下不存在当前传入的index，就直接把nestedObj[parentEle]整体替换为仅含当前index的新对象，导致同parentEle下之前存储的其他index数据被全部覆盖。同时原有逻辑没有按预期将parentEle的值初始化为数组，结构不符合要求。

注：你给出的预期结果示例存在笔误，car分类下的id字段误写为fruitId，实际运行时会根据传入的fieldName自动生成正确的carId字段，无需额外处理。

直接替换handleChange方法内的存储逻辑即可：

handleChange(e, fieldName, fieldType, index, parentEle) {
  const inputVal = e.target.value;
  // 初始化父级分类节点，不存在则创建空数组，避免覆盖同分类下已有数据
  if (!nestedObj[parentEle]) {
    nestedObj[parentEle] = [];
  }
  // 初始化当前索引位的存储对象，不存在则创建空对象，避免覆盖同索引下已有字段
  if (!nestedObj[parentEle][index]) {
    nestedObj[parentEle][index] = {};
  }
  // 写入当前字段值，同索引下其他字段、同分类下其他索引数据均不会被覆盖
  nestedObj[parentEle][index][fieldName] = inputVal;
}

• 采用分层初始化逻辑，从最外层parentEle到最内层field逐层判断是否存在，不存在则创建对应类型的初始值，从根源上避免覆盖历史数据
• 同parentEle下的多个索引数据会按传入的index顺序存入数组，和预期结构完全一致
• 同索引下多次传入不同fieldName时，会自动合并到同一个对象中，不会丢失之前存储的字段值
• 相同fieldName重复触发onChange时，会自动更新为最新的输入值，符合表单输入的常规逻辑

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