From c7b388099b2777ef6e7bf4cf83dc91f0f257387c Mon Sep 17 00:00:00 2001
From: "zhangyumei.0319" <zhangyumei.0319@bytedance.com>
Date: Wed, 18 Oct 2023 19:50:41 +0800
Subject: [PATCH 1/2] chore: add change treedata case in tree/treeSelect

---
 packages/semi-ui/tree/_story/tree.stories.jsx | 60 ++++++++++++++++++-
 .../treeSelect/_story/treeSelect.stories.jsx  | 59 +++++++++++++++++-
 2 files changed, 116 insertions(+), 3 deletions(-)

diff --git a/packages/semi-ui/tree/_story/tree.stories.jsx b/packages/semi-ui/tree/_story/tree.stories.jsx
index 8ae00acaa2..19054740ea 100644
--- a/packages/semi-ui/tree/_story/tree.stories.jsx
+++ b/packages/semi-ui/tree/_story/tree.stories.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback, useMemo } from 'react';
 import { cloneDeep, difference, isEqual } from 'lodash';
 import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
@@ -2763,4 +2763,60 @@ export const UnRelatedAndAsyncLoad = () => {
       />
     </>
   );
-};
\ No newline at end of file
+};
+
+const constructLargeData = () => {
+  const newArray = (new Array(10)).fill(0).map((item, m) => {
+    const parent = {
+      key: `key-${m}`,
+      label: `node-${m}`,
+      children: []
+    }
+    new Array(100).fill(0).map((item, n) => {
+      const children = {
+        key: `key-${m}-${n}`,
+        label: `value-${m}-${n}`,
+        children: []
+      }
+      new Array(10).fill(0).map((item, o) => {
+        const grandChildren = {
+          key: `key-${m}-${n}-${o}`,
+          label: `value-${m}-${n}-${o}`,
+        }
+        children.children.push(grandChildren);
+      });
+      parent.children.push(children);
+    });
+    return parent;
+  });
+  return newArray;
+}
+
+export const ChangeTreeData = () => {
+  const [sign, setSign] = useState(true);
+
+  const treeData1 = useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const treeData2 =  useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    setSign((sign) => {
+      return !sign;
+    })
+  }, []);
+
+  return <>
+    <Button onClick={onButtonClick}>点击修改TreeData</Button>
+    <br/><br/>
+    <Tree
+        treeData={sign ? treeData1 : treeData2}
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="请选择"
+    />
+  </>
+}
diff --git a/packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx b/packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx
index 9bcc907104..a330a2481c 100644
--- a/packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx
+++ b/packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx
@@ -5,6 +5,7 @@ import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
 import { IconCreditCard, IconChevronDown, IconClose } from '@douyinfe/semi-icons';
 import { setFocusToPreviousMenuItem } from '@douyinfe/semi-foundation/utils/a11y';
+import { node } from 'prop-types';
 const TreeNode = TreeSelect.TreeNode;
 const { Title } = Typography;
 
@@ -2416,4 +2417,60 @@ export const UnRelatedAndAsyncLoad = () => {
       />
     </>
   );
-};
\ No newline at end of file
+};
+
+const constructLargeData = () => {
+  const newArray = (new Array(10)).fill(0).map((item, m) => {
+    const parent = {
+      key: `key-${m}`,
+      label: `node-${m}`,
+      children: []
+    }
+    new Array(100).fill(0).map((item, n) => {
+      const children = {
+        key: `key-${m}-${n}`,
+        label: `value-${m}-${n}`,
+        children: []
+      }
+      new Array(10).fill(0).map((item, o) => {
+        const grandChildren = {
+          key: `key-${m}-${n}-${o}`,
+          label: `value-${m}-${n}-${o}`,
+        }
+        children.children.push(grandChildren);
+      });
+      parent.children.push(children);
+    });
+    return parent;
+  });
+  return newArray;
+}
+
+export const ChangeTreeData = () => {
+  const [sign, setSign] = useState(true);
+
+  const treeData1 = useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const treeData2 =  useMemo(() => {
+    return constructLargeData();
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    setSign((sign) => {
+      return !sign;
+    })
+  }, []);
+
+  return <>
+    <Button onClick={onButtonClick}>点击修改TreeData</Button>
+    <br/><br/>
+    <TreeSelect
+        treeData={sign ? treeData1 : treeData2}
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        placeholder="请选择"
+    />
+  </>
+}

From 574fd29c96b24052cfac1979753361b02645f865 Mon Sep 17 00:00:00 2001
From: YyumeiZhang <101110131+YyumeiZhang@users.noreply.github.com>
Date: Mon, 30 Oct 2023 21:01:43 +0800
Subject: [PATCH 2/2] fix: [Cascader] Fixed an error caused by untimely update
 of data in loadingKeys (#1876)

---
 .../semi-foundation/cascader/foundation.ts    | 26 +++++++++++++------
 packages/semi-ui/cascader/index.tsx           | 16 ++++++++++++
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/semi-foundation/cascader/foundation.ts b/packages/semi-foundation/cascader/foundation.ts
index 3c4d3a7991..7ee5493c1e 100644
--- a/packages/semi-foundation/cascader/foundation.ts
+++ b/packages/semi-foundation/cascader/foundation.ts
@@ -230,7 +230,11 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
     toggleInputShow: (show: boolean, cb: () => void) => void;
-    updateFocusState: (focus: boolean) => void
+    updateFocusState: (focus: boolean) => void;
+    updateLoadingKeyRefValue: (keys: Set<string>) => void;
+    getLoadingKeyRefValue: () => Set<string>;
+    updateLoadedKeyRefValue: (keys: Set<string>) => void;
+    getLoadedKeyRefValue: () => Set<string>
 }
 
 export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
@@ -242,6 +246,8 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     init() {
         const isOpen = this.getProp('open') || this.getProp('defaultOpen');
         this.collectOptions(true);
+        this._adapter.updateLoadingKeyRefValue(new Set());
+        this._adapter.updateLoadedKeyRefValue(new Set());
 
         if (isOpen && !this._isDisabled()) {
             this.open();
@@ -426,11 +432,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const { changeOnSelect, onChangeWithObject, multiple } = this.getProps();
         const {
             activeKeys,
-            loadingKeys,
             loading,
             keyEntities: keyEntityState,
             selectedKeys: selectedKeysState
         } = this.getStates();
+        const loadingKeys = this._adapter.getLoadingKeyRefValue();
         const filterable = this._isFilterable();
         const loadingActive = [...activeKeys].filter(i => loadingKeys.has(i));
 
@@ -672,18 +678,19 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     handleNodeLoad(item: BasicEntity | BasicData) {
         const { data, key } = item;
-        const {
-            loadedKeys: prevLoadedKeys,
-            loadingKeys: prevLoadingKeys
-        } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+        const prevLoadingKeys = cloneDeep(this._adapter.getLoadingKeyRefValue());
+        const prevLoadedKeys = cloneDeep(this._adapter.getLoadedKeyRefValue());
         const newLoadedKeys = prevLoadedKeys.add(key);
         const newLoadingKeys = new Set([...prevLoadingKeys]);
         newLoadingKeys.delete(key);
 
         // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
         this._adapter.notifyOnLoad(newLoadedKeys, data);
+        this._adapter.updateLoadingKeyRefValue(newLoadingKeys);
+        this._adapter.updateLoadedKeyRefValue(newLoadedKeys);
         this._adapter.updateStates({
             loadingKeys: newLoadingKeys,
+            loadedKeys: newLoadedKeys
         });
     }
 
@@ -691,14 +698,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         const { data, key } = item;
         this._adapter.updateStates({ loading: false });
         if (!data.isLeaf && !data.children && this.getProp('loadData')) {
-            const { loadedKeys, loadingKeys } = this.getCopyFromState(['loadedKeys', 'loadingKeys']);
+            const loadedKeys = this._adapter.getLoadedKeyRefValue();
+            const loadingKeys = cloneDeep(this._adapter.getLoadingKeyRefValue());
             if (loadedKeys.has(key) || loadingKeys.has(key)) {
                 return;
             }
             this._adapter.updateStates({ loading: true });
             const { keyEntities } = this.getStates();
             const optionPath = this.getItemPropPath(key, [], keyEntities);
-            this._adapter.updateStates({ loadingKeys: loadingKeys.add(key) });
+            const newLoadingKeys = loadingKeys.add(key);
+            this._adapter.updateLoadingKeyRefValue(newLoadingKeys);
+            this._adapter.updateStates({ loadingKeys: newLoadingKeys });
             this._adapter.notifyLoadData(optionPath, this.handleNodeLoad.bind(this, item));
         }
     }
diff --git a/packages/semi-ui/cascader/index.tsx b/packages/semi-ui/cascader/index.tsx
index 1a89f9a23e..d2ec5771ac 100644
--- a/packages/semi-ui/cascader/index.tsx
+++ b/packages/semi-ui/cascader/index.tsx
@@ -221,6 +221,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     clickOutsideHandler: any;
     mergeType: string;
     context: ContextValue;
+    loadingKeysRef: React.RefObject<Set<string> | null>;
+    loadedKeysRef: React.RefObject<Set<string> | null>;
 
     constructor(props: CascaderProps) {
         super(props);
@@ -269,6 +271,8 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         this.optionsRef = React.createRef();
         this.clickOutsideHandler = null;
         this.foundation = new CascaderFoundation(this.adapter);
+        this.loadingKeysRef = React.createRef();
+        this.loadedKeysRef = React.createRef();
     }
 
     get adapter(): CascaderAdapter {
@@ -389,6 +393,18 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             updateFocusState: (isFocus: boolean) => {
                 this.setState({ isFocus });
             },
+            updateLoadingKeyRefValue: (keys: Set<string>) => {
+                (this.loadingKeysRef as any).current = keys;
+            },
+            getLoadingKeyRefValue: () => {
+                return this.loadingKeysRef.current;
+            },
+            updateLoadedKeyRefValue: (keys: Set<string>) => {
+                (this.loadedKeysRef as any).current = keys;
+            },
+            getLoadedKeyRefValue: () => {
+                return this.loadedKeysRef.current;
+            }
         };
     }