React树形状态CRUD架构优化：合并修改与子节点添加逻辑

针对你遇到的树形状态操作冗余问题，我们可以封装一个通用的树形节点递归处理函数，把编辑节点、添加子节点的逻辑合并，同时优化删除函数的可读性。

1. 修正删除函数的命名问题 #

delete是JavaScript保留关键字，不能作为函数名，先把删除函数修正：

const recursiveDelete = (data, targetId) => {
  return data.reduce((acc, node) => {
    if (node.id !== targetId) {
      const updatedNode = { ...node };
      if (Array.isArray(updatedNode.children)) {
        updatedNode.children = recursiveDelete(updatedNode.children, targetId);
      }
      acc.push(updatedNode);
    }
    return acc;
  }, []);
};

const handleRemoveItem = (id) => {
  setTree(prev => recursiveDelete(prev, id));
};

2. 封装通用节点修改函数 #

我们可以写一个modifyTreeNode函数，它接受树形数据、目标节点ID，以及一个节点处理回调——这个回调会在找到目标节点时执行，你可以在回调里定义编辑节点、添加子节点的逻辑，这样就把两个功能合并成一个通用函数：

const modifyTreeNode = (data, targetId, modifyCallback) => {
  return data.map(node => {
    // 找到目标节点，执行修改回调
    if (node.id === targetId) {
      return modifyCallback({ ...node });
    }
    // 非目标节点，递归处理子节点（如果有）
    const updatedNode = { ...node };
    if (Array.isArray(updatedNode.children)) {
      updatedNode.children = modifyTreeNode(updatedNode.children, targetId, modifyCallback);
    }
    return updatedNode;
  });
};

用通用函数实现编辑节点 #

比如修改目标节点的name：

const handleEditNode = (id, newName) => {
  setTree(prev => modifyTreeNode(prev, id, (node) => {
    return { ...node, name: newName };
  }));
};

用通用函数实现添加子节点 #

给目标节点新增子节点：

const handleAddChild = (parentId, newChild) => {
  setTree(prev => modifyTreeNode(prev, parentId, (node) => {
    return {
      ...node,
      children: [...(node.children || []), newChild]
    };
  }));
};
// 调用示例：给id=1的节点加子节点
handleAddChild(1, { id: 6, name: '6' });

3. 完整示例代码 #

把所有逻辑整合到组件里：

import { useState } from 'react';

const TreeComponent = () => {
  const [tree, setTree] = useState([{
    id: 1,
    name: '1',
    children: [{
      id: 3,
      name: 3
    }, {
      id: 4,
      name: 4,
      children: [{
        id: 5,
        name: 5
      }]
    }]
  }, {
    id: 2,
    name: 2
  }]);

  // 删除节点函数
  const recursiveDelete = (data, targetId) => {
    return data.reduce((acc, node) => {
      if (node.id !== targetId) {
        const updatedNode = { ...node };
        if (Array.isArray(updatedNode.children)) {
          updatedNode.children = recursiveDelete(updatedNode.children, targetId);
        }
        acc.push(updatedNode);
      }
      return acc;
    }, []);
  };

  const handleRemoveItem = (id) => {
    setTree(prev => recursiveDelete(prev, id));
  };

  // 通用节点修改函数
  const modifyTreeNode = (data, targetId, modifyCallback) => {
    return data.map(node => {
      if (node.id === targetId) {
        return modifyCallback({ ...node });
      }
      const updatedNode = { ...node };
      if (Array.isArray(updatedNode.children)) {
        updatedNode.children = modifyTreeNode(updatedNode.children, targetId, modifyCallback);
      }
      return updatedNode;
    });
  };

  // 编辑节点名称
  const handleEditNode = (id, newName) => {
    setTree(prev => modifyTreeNode(prev, id, (node) => ({ ...node, name: newName })));
  };

  // 添加子节点
  const handleAddChild = (parentId, newChild) => {
    setTree(prev => modifyTreeNode(prev, parentId, (node) => ({
      ...node,
      children: [...(node.children || []), newChild]
    })));
  };

  // 渲染树形结构（示例）
  const renderTree = (nodes) => {
    return (
      <ul>
        {nodes.map(node => (
          <li key={node.id}>
            <span>{node.name}</span>
            <button onClick={() => handleEditNode(node.id, `Edited ${node.name}`)}>编辑</button>
            <button onClick={() => handleRemoveItem(node.id)}>删除</button>
            <button onClick={() => handleAddChild(node.id, { id: Date.now(), name: `New ${node.id}-child` })}>加子节点</button>
            {node.children && renderTree(node.children)}
          </li>
        ))}
      </ul>
    );
  };

  return <div>{renderTree(tree)}</div>;
};

export default TreeComponent;

优化优势 #

• 减少冗余代码：不用为编辑和添加子节点写两套重复的递归逻辑，通用函数只维护一套遍历规则。
• 扩展性强：后续需要给节点加其他属性修改（比如添加状态标识、修改ID），直接复用modifyTreeNode，只需要传不同的回调即可。
• 可读性更高：每个操作函数（编辑、添加、删除）职责单一，通用函数的递归逻辑清晰，便于维护。

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