fix(CheckTreePicker): fix duplicated key when data changed (#2486)

src/CheckTreePicker/test/CheckTreePickerSpec.js

@@ -5,6 +5,7 @@ import { getDOMNode, getInstance } from '@test/testUtils';
 import CheckTreePicker from '../CheckTreePicker';
 import { KEY_VALUES } from '../../utils';
 import { assert } from 'chai';
+import { originMockData, changedMockData } from './mocks';
 
 const itemFocusClassName = '.rs-check-tree-node-focus';
 const itemExpandedClassName = '.rs-check-tree-node-expanded';
@@ -611,4 +612,36 @@ describe('CheckTreePicker', () => {
     ReactTestUtils.Simulate.change(instance.overlay.querySelector('div[data-key="0-0-1-0"] input'));
     assert.equal(instance.overlay.querySelectorAll('.rs-checkbox-indeterminate').length, 1);
   });
+
+  it('Should not has duplicated key when data changed', () => {
+    const TestApp = React.forwardRef((props, ref) => {
+      const pickerRef = React.useRef();
+      React.useImperativeHandle(ref, () => {
+        return {
+          picker: pickerRef.current
+        };
+      });
+      return <CheckTreePicker ref={pickerRef} {...props} open />;
+    });
+
+    let checkItems = [];
+    const mockRenderValue = (values, checkedItems, selectedElement) => {
+      checkItems = checkedItems;
+      return selectedElement;
+    };
+    const ref = React.createRef();
+    const { rerender } = render(
+      <TestApp ref={ref} data={originMockData} renderValue={mockRenderValue} />
+    );
+
+    rerender(<TestApp ref={ref} data={changedMockData} renderValue={mockRenderValue} />);
+
+    ReactTestUtils.act(() => {
+      ReactTestUtils.Simulate.change(
+        ref.current.picker.overlay.querySelector('div[data-key="0-0-1"] input')
+      );
+    });
+
+    assert.equal(checkItems.length, 1);
+  });
 });

src/CheckTreePicker/test/mocks.js

@@ -0,0 +1,38 @@
+export const originMockData = [
+  {
+    value: 'root-node',
+    label: 'root-node',
+    children: [
+      {
+        value: 'node-1',
+        label: 'node-1',
+        children: [{ value: 'node-1-1', label: 'node-1-1' }]
+      },
+      {
+        value: 'node-2',
+        label: 'node-2',
+        children: [{ value: 'node-2-1', label: 'node-2-1' }]
+      }
+    ]
+  }
+];
+
+export const changedMockData = [
+  {
+    value: 'root-node',
+    label: 'root-node',
+    children: [
+      {
+        value: 'node-1',
+        label: 'node-1',
+        children: [{ value: 'node-1-1', label: 'node-1-1' }]
+      },
+      { value: 'node-2-1', label: 'node-2-1' },
+      {
+        value: 'node-2',
+        label: 'node-2',
+        children: []
+      }
+    ]
+  }
+];

src/utils/treeUtils.ts

@@ -643,7 +643,7 @@ export function useFlattenTreeData({
     dispatch(Object.create(null));
   }, [dispatch]);
 
-  const { current: flattenNodes = {} } = useRef<TreeNodesType>({});
+  const flattenNodes = useRef<TreeNodesType>({});
 
   const flattenTreeData = useCallback(
     (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType, layer = 1) => {
@@ -655,8 +655,7 @@ export function useFlattenTreeData({
         const refKey = `${ref}-${index}`;
 
         node.refKey = refKey;
-
-        flattenNodes[refKey] = {
+        flattenNodes.current[refKey] = {
           layer,
           [labelKey]: node[labelKey],
           [valueKey]: node[valueKey],
@@ -666,14 +665,14 @@ export function useFlattenTreeData({
           ...node
         };
         if (parent) {
-          flattenNodes[refKey].parent = omit(parent, 'parent', 'children');
+          flattenNodes.current[refKey].parent = omit(parent, 'parent', 'children');
         }
         flattenTreeData(node[childrenKey], refKey, node, layer + 1);
       });
 
-      callback?.(flattenNodes);
+      callback?.(flattenNodes.current);
     },
-    [childrenKey, valueKey, labelKey, callback, uncheckableItemValues, flattenNodes]
+    [childrenKey, valueKey, labelKey, callback, uncheckableItemValues]
   );
 
   const serializeListOnlyParent = useCallback(
@@ -778,12 +777,14 @@ export function useFlattenTreeData({
   };
 
   useEffect(() => {
+    // when data is changed, should clear the flattenNodes, avoid duplicate keys
+    flattenNodes.current = {};
     flattenTreeData(data, '0');
   }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     forceUpdate,
-    flattenNodes,
+    flattenNodes: flattenNodes.current,
     flattenTreeData,
     serializeListOnlyParent,
     unSerializeList,