react-animated-tree-v2组件切换重复挂载、状态丢失及重复请求问题求助

问题根源 #

react-animated-tree-v2在收起节点时，会直接卸载子节点对应的DOM元素，导致子组件内部状态丢失，同时触发重复的数据请求。

解决方案（无需修改npm包） #

通过包装组件控制子组件的显示/隐藏而非卸载，让子组件实例始终存在，从而保留状态并避免重复请求。

步骤1：创建持久化子组件包装器 #

这个组件会根据父节点的展开状态，用CSS隐藏/显示子组件，而非卸载它：

import React from 'react';

const PersistentTreeChild = ({ isExpanded, children }) => {
  return (
    <div style={{ display: isExpanded ? 'block' : 'none' }}>
      {children}
    </div>
  );
};

步骤2：修改Tree组件的使用方式 #

通过Tree的onToggle事件监听展开状态，将状态传递给包装组件，同时把需要保留状态的子组件放到包装器内部：

import { useState } from 'react';
import Tree from 'react-animated-tree-v2';
import PersistentTreeChild from './PersistentTreeChild';
import SomeComponentTree from './SomeComponentTree';

// 父组件中使用
const ParentComponent = () => {
  const [isSubTreeExpanded, setIsSubTreeExpanded] = useState(false);

  return (
    <Tree
      content="sub-subtree with children"
      onToggle={(expanded) => setIsSubTreeExpanded(expanded)}
    >
      <PersistentTreeChild isExpanded={isSubTreeExpanded}>
        <SomeComponentTree />
      </PersistentTreeChild>
    </Tree>
  );
};

步骤3：确保子组件仅初始化请求一次 #

在SomeComponentTree中，用空依赖数组的useEffect保证数据请求只在组件第一次挂载时执行：

import { useState, useEffect } from 'react';

const SomeComponentTree = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 替换为你的实际数据请求逻辑
    const fetchData = async () => {
      const res = await fetch('/your-api-endpoint');
      const result = await res.json();
      setData(result);
    };
    fetchData();
  }, []); // 空依赖数组：仅在组件挂载时执行一次

  return (
    <div>
      {data ? (
        <p>加载的数据：{JSON.stringify(data)}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

原理说明 #

• PersistentTreeChild通过display: none隐藏子组件时，组件实例并未被卸载，内部状态会被完整保留。
• Tree组件始终渲染的是PersistentTreeChild，收起/展开操作不会触发包装器的卸载，因此内部的SomeComponentTree状态稳定，不会重复发起请求。

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