PrimeNG树形组件拖拽文件夹丢失子文件问题求助

在使用PrimeNG树形组件实现文件夹拖拽功能时，将文件夹移动到目标文件夹后，文件夹本身能成功移动，但其中的子文件全部丢失，通过console.log发现移动后的文件夹节点没有子节点。

问题原因分析 #

1. 拖拽事件传递的source节点不完整：若文件夹未展开，PrimeNG可能因延迟加载未初始化该节点的children属性，直接复制此节点会丢失子文件；
2. 深拷贝方法deepCopyNode对children的处理逻辑不匹配实际数据结构：比如原节点children为null时被错误转换为空数组，未保留原有的子节点引用；
3. removeNode方法在递归处理时，错误地将非目标节点的children强制初始化为空数组，破坏了原数据结构。

修复方案 #

方案1：获取完整的源节点 #

避免直接使用拖拽事件返回的节点，通过节点ID从数据源中查询完整节点，确保包含所有子节点：

moveFolder(sourceId: number, targetId: number): void {
  if (sourceId === targetId) {
    console.error("Cannot move a folder to itself");
    return;
  }

  let allFiles = this.getFiles();
  // 从数据源中获取包含完整子节点的源节点
  const source = this.findNodeById(sourceId, allFiles);
  if (!source || source.itemtype !== ITEMTYPE.folder) {
    console.error("Source is not a folder or does not exist");
    return;
  }

  const sourceCopy = this.deepCopyNode(source);
  allFiles = this.removeNode(allFiles, sourceId);  
  this.addNodeToTarget(allFiles, sourceCopy, targetId);
  this.filesSubject.next(allFiles);
}

方案2：修复深拷贝逻辑 #

调整deepCopyNode，确保正确处理children为null或未定义的情况，递归复制所有子节点：

private deepCopyNode(node: FileItem): FileItem {
  return {
    ...node,
    // 仅当children存在时才递归复制，否则保留原状态
    children: node.children ? node.children.map(child => this.deepCopyNode(child)) : node.children
  };
}

方案3：修正节点移除逻辑 #

确保removeNode仅移除目标节点，不破坏其他节点的子节点结构：

private removeNode(nodes: FileItem[], nodeId: number): FileItem[] {
  return nodes.reduce((acc: FileItem[], node: FileItem) => {
    if (node.id !== nodeId) {
      acc.push({
        ...node,
        // 原节点有children时才递归处理，否则保留原children
        children: node.children ? this.removeNode(node.children, nodeId) : node.children
      });
    }
    return acc;
  }, []);
}

验证方法 #

修改后可在深拷贝后添加日志，确认复制的节点包含完整子节点：

const sourceCopy = this.deepCopyNode(source);
console.log('Copied source node:', sourceCopy); // 检查子节点是否存在

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