fix(pro:transfer): maximum recursive updates exceeded under vue 3.4

IDuxFE · Jan 2, 2024 · e511253 · e511253
1 parent 617c192
commit e511253
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/packages/pro/transfer/__tests__/proTransfer.spec.ts b/packages/pro/transfer/__tests__/proTransfer.spec.ts
@@ -202,14 +202,14 @@ describe('ProTransfer', () => {
     await sourceTree.findAll('.ix-tree-node')[0].find('input').setValue(true)
     await appendTrigger.trigger('click')
 
-    expect(onChange).toBeCalledWith(['1-2-2', '1', '1-2', '1-2-1', '1-1', '1-3'], ['1-2-2'])
+    expect(onChange).toBeCalledWith(['1-2-2', '1', '1-1', '1-2', '1-2-1', '1-3'], ['1-2-2'])
 
-    await wrapper.setProps({ value: ['1-2-2', '1', '1-2', '1-2-1', '1-1', '1-3'] })
+    await wrapper.setProps({ value: ['1-2-2', '1', '1-1', '1-2', '1-2-1', '1-3'] })
 
     await targetTree.findAll('.ix-tree-node')[0].find('input').setValue(true)
     await removeTrigger.trigger('click')
 
-    expect(onChange).toBeCalledWith(['1-2-2'], ['1-2-2', '1', '1-2', '1-2-1', '1-1', '1-3'])
+    expect(onChange).toBeCalledWith(['1-2-2'], ['1-2-2', '1', '1-1', '1-2', '1-2-1', '1-3'])
   })
 
   test('table immediate work', async () => {

diff --git a/packages/pro/transfer/src/composables/useTreeDataStrategy.ts b/packages/pro/transfer/src/composables/useTreeDataStrategy.ts
@@ -90,8 +90,8 @@ const genDisabledKeys = <V extends TreeTransferData<V, C>, C extends string>(
 }
 
 function createSeparateDataSourceFn<V extends TreeTransferData<V, C>, C extends string>(
-  childrenKey: ComputedRef<C>,
-  cachedTargetData: Ref<V[]>,
+  childrenKey: C,
+  cachedTargetData: { value: V[] },
   cascaderStrategy: CascaderStrategy,
   targetDataCount: Ref<number>,
   dataMap: Map<VKey, V>,
@@ -108,8 +108,7 @@ function createSeparateDataSourceFn<V extends TreeTransferData<V, C>, C extends
         case 'off':
           return (item, _, isSource) => selectedKeySet.has(getKey(item)) !== isSource
         case 'child':
-          return (item, _, isSource) =>
-            selectedKeySet.has(getKey(item)) !== isSource && !item[childrenKey.value]?.length
+          return (item, _, isSource) => selectedKeySet.has(getKey(item)) !== isSource && !item[childrenKey]?.length
         case 'parent':
           return (item, parent, isSource) =>
             [item, ...parent].map(getKey).some(key => selectedKeySet.has(key)) !== isSource
@@ -120,7 +119,7 @@ function createSeparateDataSourceFn<V extends TreeTransferData<V, C>, C extends
       if (isSource || cascaderStrategy !== 'off') {
         return filterTree(
           data,
-          childrenKey.value,
+          childrenKey,
           (item, parent, filteredChildren) => {
             const filterRes = filterFn(item, parent, isSource)
 
@@ -137,9 +136,9 @@ function createSeparateDataSourceFn<V extends TreeTransferData<V, C>, C extends
       }
 
       const res: V[] = []
-      traverseTree(data, childrenKey.value, (item, parent) => {
+      traverseTree(data, childrenKey, (item, parent) => {
         if (filterFn(item, parent, isSource)) {
-          res.push({ ...item, [childrenKey.value]: undefined })
+          res.push({ ...item, [childrenKey]: undefined })
         }
       })
       return res
@@ -157,15 +156,14 @@ function createSeparateDataSourceFn<V extends TreeTransferData<V, C>, C extends
 
     // merge new data with previous data
     // beacause we intend to cache selected data after dataSource changes
-    const targetData = mergeTree(previousTargetData, newTargetData, childrenKey.value, getKey)
+    const targetData = mergeTree(previousTargetData, newTargetData, childrenKey, getKey)
     cachedTargetData.value = targetData
 
     targetDataCount.value = cascaderStrategy === 'off' ? targetData.length : dataMap.size - sourceDataKeySet.size
 
     return {
       sourceData,
-      targetData:
-        cascaderStrategy === 'off' ? targetData : flattenTargetTree(targetData, childrenKey.value, flatTargetData),
+      targetData: cascaderStrategy === 'off' ? targetData : flattenTargetTree(targetData, childrenKey, flatTargetData),
     }
   }
 }
@@ -194,7 +192,7 @@ function createStrategy<V extends TreeTransferData<V, C>, C extends string>(
     getAllSelectedKeys: (selected, data, selectedKeySet, disabledKeySet) =>
       getAllSelectedKeys(selected, checkStateResolver, data, selectedKeySet, disabledKeySet),
     separateDataSource: createSeparateDataSourceFn(
-      childrenKey,
+      childrenKey.value,
       cachedTargetData,
       cascaderStrategy,
       targetDataCount,

diff --git a/packages/pro/transfer/src/composables/useTreeDataStrategyContext.ts b/packages/pro/transfer/src/composables/useTreeDataStrategyContext.ts
@@ -29,7 +29,7 @@ export interface TreeDataStrategyContext<
   parentKeyMap: Map<VKey, VKey>
   getKey: ComputedRef<GetKeyFn>
   childrenKey: ComputedRef<C>
-  cachedTargetData: Ref<V[]>
+  cachedTargetData: { value: V[] }
   targetDataCount: Ref<number>
 }
 
@@ -39,7 +39,7 @@ export function useTreeDataStrategyContext<V extends TreeTransferData<V, C>, C e
   getKey: ComputedRef<GetKeyFn>,
   cascadeStrategy: ComputedRef<TreeCascadeStrategy>,
 ): TreeDataStrategyContext<V, C> {
-  const cachedTargetData = ref(props.defaultTargetData ?? []) as Ref<V[]>
+  const cachedTargetData = { value: props.defaultTargetData ?? [] } as { value: V[] }
   const targetDataCount = ref(0)
   const dataMap: Map<VKey, V> = new Map()
   const parentKeyMap: Map<VKey, VKey> = new Map()