如何在更新树数据时保留树项collapsibleState并检测折叠状态？

当然可以做到，核心思路是先记录节点当前的折叠/展开状态，更新数据后再恢复对应状态，具体实现分两步：

一、检测树项的当前折叠/展开状态 #

• 借助组件内置能力：绝大多数成熟的树组件（如Ant Design Tree、Element UI Tree、Vuetify Tree等）都提供了获取节点状态的API，比如getExpandedKeys（获取所有展开节点的ID）、getNode（通过ID获取单个节点的详细状态，包含折叠状态）。
• 手动记录状态：在节点的折叠/展开回调事件（如onExpand、onCollapse）中，实时将节点ID和对应状态存入一个对象或状态管理工具（如Redux、Pinia），比如：

// 示例：React中实时记录展开状态
const expandedState = useRef({});

const handleExpand = (expandedKeys, { node }) => {
  expandedState.current[node.key] = true;
};

const handleCollapse = (expandedKeys, { node }) => {
  expandedState.current[node.key] = false;
};

二、更新树数据时保留折叠状态 #

• 步骤1：更新数据前，先获取或取出所有节点的当前折叠/展开状态。
• 步骤2：替换树数据后，根据节点唯一ID匹配之前记录的状态，手动恢复。
• 举个实际代码示例（React + Ant Design Tree）：

import { Tree, Button } from 'antd';
import { useRef, useState } from 'react';

const TreeDemo = () => {
  const treeRef = useRef(null);
  const [treeData, setTreeData] = useState(initialTreeData);

  const updateTreeData = () => {
    // 1. 记录当前展开的节点ID
    const currentExpandedKeys = treeRef.current.getExpandedKeys();
    // 2. 获取新的树数据
    const newTreeData = fetchUpdatedTreeData();
    // 3. 更新数据
    setTreeData(newTreeData);
    // 4. 恢复展开状态
    treeRef.current.setExpandedKeys(currentExpandedKeys);
  };

  return (
    <>
      <Button onClick={updateTreeData}>更新树数据</Button>
      <Tree ref={treeRef} treeData={treeData} />
    </>
  );
};

• 若你是自定义树组件，只需在更新节点数据时，遍历新节点，保留原节点的collapsibleState字段，仅替换其他业务数据即可：

// 自定义树节点更新逻辑
const updateTreeNode = (oldNode, newNodeData) => {
  return {
    ...newNodeData,
    collapsibleState: oldNode.collapsibleState // 保留原有折叠状态
  };
};

关键注意事项 #

• 必须确保每个树节点拥有唯一且稳定的标识（如ID），否则无法在新旧数据间准确匹配状态。
• 如果树结构有较大变动（如节点新增/删除），需额外处理新增节点的默认状态，以及已删除节点的状态清理。

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