求助：递归按key为树形结构添加元素仅特定层级生效的问题

你的递归函数存在两个核心问题：

1. 未保留非匹配节点：原reduce逻辑里，只有当节点key匹配时才将元素推入结果数组，其他节点直接被忽略，导致返回的树结构丢失大部分节点。
2. 未更新子节点引用：递归处理子节点时，没有将递归返回的更新后的子节点数组赋值给当前节点的children，所以子节点的修改无法同步到父节点。

修正后的代码 #

const treeData = [{
  title: 'parent 1',
  key: '0-0',
  children: [{
    title: 'parent 1-0',
    key: '0-0-0',
    disabled: true,
    children: [{
        title: 'leafffff',
        key: '0-0-0-0',
      }
    ],
  }, ],
}, ];

const recursiveUpdate = (data, key) => {
  return data.map(el => {
    // 找到目标节点，添加新子元素
    if (el.key === key) {
      return {
        ...el,
        children: [
          ...(el.children || []),
          { title: '111111111111', key: 'new-key' }
        ]
      };
    }
    // 存在子节点时，递归处理子节点并更新当前节点的children
    if (el.children) {
      return {
        ...el,
        children: recursiveUpdate(el.children, key)
      };
    }
    // 既不是目标节点也没有子节点，直接返回原节点副本
    return { ...el };
  });
}

// 测试不同层级的添加
console.log(recursiveUpdate(treeData, '0-0-0'));
console.log(recursiveUpdate(treeData, '0-0'));
console.log(recursiveUpdate(treeData, '0-0-0-0'));

关键改动说明 #

• 用map替代reduce：map更适合遍历转换所有节点的场景，确保原树形结构的所有节点都被保留并处理。
• 同步子节点更新：递归处理子节点时，将返回的更新后的子数组赋值给当前节点的children属性，让子节点的修改能同步到父节点。
• 不可变更新：所有节点修改都通过扩展运算符...创建新对象/数组，避免直接修改原树形数据，保持数据的不可变性，减少意外副作用。

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