fix: onExpand should check if children tree node loaded

src/Tree.tsx

@@ -29,7 +29,7 @@ import {
   SafeKey,
   ScrollTo,
 } from './interface';
-import NodeList, { MotionEntity, MOTION_KEY, NodeListRef } from './NodeList';
+import NodeList, { MOTION_KEY, MotionEntity, NodeListRef } from './NodeList';
 import TreeNode from './TreeNode';
 import {
   arrAdd,
@@ -957,6 +957,13 @@ class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends Rea
 
   onNodeLoad = (treeNode: EventDataNode<TreeDataType>) => {
     const { key } = treeNode;
+    const { keyEntities } = this.state;
+
+    // Skip if has children already
+    const entity = getEntity(keyEntities, key);
+    if (entity?.children?.length) {
+      return;
+    }
 
     const loadPromise = new Promise<void>((resolve, reject) => {
       // We need to get the latest state of loading/loaded keys

src/TreeNode.tsx

@@ -251,7 +251,7 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
   };
 
   // Load data to avoid default expanded tree without data
-  syncLoadData = props => {
+  syncLoadData = (props: InternalTreeNodeProps) => {
     const { expanded, loading, loaded } = props;
     const {
       context: { loadData, onNodeLoad },
@@ -262,12 +262,10 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
     }
 
     // read from state to avoid loadData at same time
-    if (loadData && expanded && !this.isLeaf()) {
+    if (loadData && expanded && !this.isLeaf() && !loaded) {
       // We needn't reload data when has children in sync logic
       // It's only needed in node expanded
-      if (!this.hasChildren() && !loaded) {
-        onNodeLoad(convertNodePropsToEventData(this.props));
-      }
+      onNodeLoad(convertNodePropsToEventData(this.props));
     }
   };
 
@@ -582,7 +580,13 @@ class InternalTreeNode extends React.Component<InternalTreeNodeProps, TreeNodeSt
         {...ariaSelected}
         {...dataOrAriaAttributeProps}
       >
-        <Indent prefixCls={prefixCls} level={level} isStart={isStart} isEnd={isEnd} width={indentWidth} />
+        <Indent
+          prefixCls={prefixCls}
+          level={level}
+          isStart={isStart}
+          isEnd={isEnd}
+          width={indentWidth}
+        />
         {this.renderDragHandler()}
         {this.renderSwitcher()}
         {this.renderCheckbox()}

tests/TreeProps.spec.tsx

@@ -559,7 +559,7 @@ describe('Tree Props', () => {
         </Tree>,
       );
 
-      fireEvent.click(container.querySelector('.rc-tree-switcher'));
+      fireEvent.click(container.querySelector('.rc-tree-switcher')!);
 
       expect(onExpand).toHaveBeenCalled();
 
@@ -614,14 +614,14 @@ describe('Tree Props', () => {
       const { container } = render(<Test />);
 
       // Parent click
-      fireEvent.click(container.querySelector('.rc-tree-switcher'));
+      fireEvent.click(container.querySelector('.rc-tree-switcher')!);
 
       setTimeout(() => {
         // Child click
         fireEvent.click(container.querySelectorAll('.rc-tree-switcher')[1]);
 
         setTimeout(() => {
-          expect(count).toBe(2);
+          expect(count).toBe(1);
           done();
         }, 500);
       }, 500);
@@ -654,6 +654,37 @@ describe('Tree Props', () => {
         'Warning: Retry for `loadData` many times but still failed. No more retry.',
       );
     });
+
+    // https://github.com/ant-design/ant-design/issues/48796
+    it('skip load if has children', () => {
+      const loadData = jest.fn(async (info) => {
+        console.log('->', info.key);
+      });
+
+      const { container } = render(
+        <Tree
+          loadedKeys={[]}
+          loadData={loadData}
+          treeData={[
+            {
+              title: 'parent',
+              key: 'parent',
+              isLeaf: false,
+              children: [
+                {
+                  title: 'child',
+                  key: 'child',
+                  isLeaf: true,
+                },
+              ],
+            },
+          ]}
+        />,
+      );
+
+      fireEvent.click(container.querySelector('.rc-tree-switcher')!);
+      expect(loadData).not.toHaveBeenCalled();
+    });
   });
 
   it('icon', () => {
@@ -693,14 +724,16 @@ describe('Tree Props', () => {
 
   it('indentWidth', () => {
     const { container } = render(
-        <Tree defaultExpandAll indentWidth={200}>
-          <TreeNode key="0-0" title="parent">
-            <TreeNode key="0-0-0" title="child" />
-          </TreeNode>
-        </Tree>
+      <Tree defaultExpandAll indentWidth={200}>
+        <TreeNode key="0-0" title="parent">
+          <TreeNode key="0-0-0" title="child" />
+        </TreeNode>
+      </Tree>,
+    );
+
+    expect(getComputedStyle(container.querySelector('.rc-tree-indent-unit-start')).width).toBe(
+      '200px',
     );
-
-    expect(getComputedStyle(container.querySelector(".rc-tree-indent-unit-start")).width).toBe('200px')
   });
 
   it('onDoubleClick', () => {
@@ -775,7 +808,7 @@ describe('Tree Props', () => {
           return new FakePromise(ret);
         };
 
-        catch = () => { };
+        catch = () => {};
       }
 
       // eslint-disable-next-line prefer-const