React TreeView组件递归查找并更新节点异常：层级超过2级时无法正常更新

先看你的updateItem函数，问题出在递归处理子节点的逻辑上——你调用了updateItem(item.children, newFile)，但没有把这个函数返回的新数组赋值回当前item的children。因为React依赖不可变数据更新，必须创建新的对象/数组才能触发组件重新渲染，直接修改原数据不会生效。

另外，每次在map循环里调用dfs(item, selectedItem.id)也有点冗余，我们可以把目标节点ID作为参数传给updateItem，在递归过程中直接判断，不用反复执行查找逻辑。

修复后的代码 #

调整后的updateItem函数会在递归时正确替换子节点数组，同时去掉冗余的dfs调用：

const updateItem = (data: TreeData[], targetId: string, newFile: TreeData): TreeData[] => {
  return data.map((item) => {
    // 找到目标节点，添加新子项并返回新对象
    if (item.id === targetId) {
      return {
        ...item,
        children: [...(item.children || []), newFile], // 兼容children为undefined的情况
        isOpen: true, // 可选：添加后自动展开父节点，提升用户体验
      };
    } 
    // 非目标节点但有子节点，递归处理子节点并替换当前item的children
    else if (item.children && item.children.length > 0) {
      const updatedChildren = updateItem(item.children, targetId, newFile);
      // 只有子数组确实变化了，才返回新对象，避免不必要的重渲染
      if (updatedChildren !== item.children) {
        return { ...item, children: updatedChildren };
      }
    }
    // 没有变化，返回原item
    return item;
  });
};

调用时直接传入选中节点的ID即可：

// 假设selectedItem是你选中的树形节点
const updatedTreeData = updateItem(originalTreeData, selectedItem.id, newFile);

原代码失效的核心原因 #

1. 缺少返回值赋值：原代码里递归调用updateItem(item.children, newFile)后，没有把返回的新children数组赋值给当前item。map函数里如果不返回新对象，原数组的元素不会被替换，深层节点的修改就会丢失。
2. 冗余的dfs调用：每次在map循环里调用dfs查找目标节点，不仅效率低，还可能因为重复查找导致判断逻辑混乱，尤其是节点层级较深时。

额外优化建议 #

• 兼容children为undefined的场景：用...(item.children || [])避免数组展开时报错。
• 按需创建新对象：只有子节点确实被修改时才返回新的item，减少组件不必要的重渲染。
• 移除独立的dfs函数：现在updateItem递归过程中直接判断目标ID，逻辑更紧凑。

测试这个修复后的函数，不管节点层级有多深，只要目标ID正确，就能在对应节点下添加新的文件夹或文件，TreeView也会正常更新。

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