树状数据递归遍历与节点替换问题求助

直接用递归遍历+不可变更新的方式就能解决，核心是遍历每个节点层级时，只替换匹配目标的节点，其余节点（包括父节点）完整保留：

// 递归遍历并替换指定keyNum的节点
const updateTreeNodes = (nodes: TreeData[], targetNode: TreeData): TreeData[] => {
  return nodes.map(node => {
    // 匹配到目标节点，替换为已加载子节点的版本
    if (node.keyNum === targetNode.keyNum) {
      return { ...targetNode };
    }
    // 有子节点则递归处理子节点数组，保留当前节点结构
    if (node.children?.length) {
      return {
        ...node,
        children: updateTreeNodes(node.children, targetNode)
      };
    }
    // 无匹配无子节点，返回原节点副本
    return { ...node };
  });
};

// 调用示例
const updatedNodes = updateTreeNodes(nodes, event);
setNodes(updatedNodes);

关键逻辑说明 #

1. 不可变更新：每次处理节点都返回新对象（用扩展运算符...），避免直接修改原数组/对象，适配React等框架的状态更新机制，也防止意外修改原始数据。
2. 层级保留：遍历到非目标节点时，会完整保留该节点的所有属性，仅当节点有子节点时，递归更新子节点数组，上层父节点结构不会被覆盖。
3. 精准替换：只有keyNum匹配的节点会被替换为带加载后子节点的event节点，其余节点原样保留。

这个方法能保证点击element1后，原树形结构的root和element2都保留，仅更新element1为包含子节点的版本，完全符合预期结果。

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