Repository: alibaba/hooks (ts)

Issue:
useDynamicList 中使用resetList时，数据没有更新
在使用resetList时，对应的表单域中的数据没有变，源码中好像在reset的时候，重置了key，这里感觉应该在现有key的基础上进行递增，不然表单域中的key没有变，数据不会更新

Pull request:
Perf/use dynamic list
close #893 

Patch:
diff --git a/packages/hooks/src/useDynamicList/index.ts b/packages/hooks/src/useDynamicList/index.ts
index 2448fe59..171962b1 100644
--- a/packages/hooks/src/useDynamicList/index.ts
+++ b/packages/hooks/src/useDynamicList/index.ts
@@ -18,30 +18,32 @@ export default <T>(initialValue: T[]) => {
     return initialValue || [];
   });
 
-  const resetList = (newList: T[] = []) => {
+  const resetList = useCallback((newList: T[] = []) => {
     keyList.current = [];
-    counterRef.current = -1;
     setList(() => {
       (newList || []).forEach((_, index) => {
         setKey(index);
       });
       return newList || [];
     });
-  };
+  }, []);
 
-  const insert = (index: number, obj: T) => {
+  const insert = useCallback((index: number, obj: T) => {
     setList((l) => {
       const temp = [...l];
       temp.splice(index, 0, obj);
       setKey(index);
       return temp;
     });
-  };
+  }, []);
 
-  const getKey = (index: number) => keyList.current[index];
-  const getIndex = (index: number) => keyList.current.findIndex((ele) => ele === index);
+  const getKey = useCallback((index: number) => keyList.current[index], []);
+  const getIndex = useCallback(
+    (key: number) => keyList.current.findIndex((ele) => ele === key),
+    [],
+  );
 
-  const merge = (index: number, obj: T[]) => {
+  const merge = useCallback((index: number, obj: T[]) => {
     setList((l) => {
       const temp = [...l];
       obj.forEach((_, i) => {
@@ -50,17 +52,17 @@ export default <T>(initialValue: T[]) => {
       temp.splice(index, 0, ...obj);
       return temp;
     });
-  };
+  }, []);
 
-  const replace = (index: number, obj: T) => {
+  const replace = useCallback((index: number, obj: T) => {
     setList((l) => {
       const temp = [...l];
       temp[index] = obj;
       return temp;
     });
-  };
+  }, []);
 
-  const remove = (index: number) => {
+  const remove = useCallback((index: number) => {
     setList((l) => {
       const temp = [...l];
       temp.splice(index, 1);
@@ -73,9 +75,9 @@ export default <T>(initialValue: T[]) => {
       }
       return temp;
     });
-  };
+  }, []);
 
-  const move = (oldIndex: number, newIndex: number) => {
+  const move = useCallback((oldIndex: number, newIndex: number) => {
     if (oldIndex === newIndex) {
       return;
     }
@@ -95,16 +97,16 @@ export default <T>(initialValue: T[]) => {
 
       return temp;
     });
-  };
+  }, []);
 
-  const push = (obj: T) => {
+  const push = useCallback((obj: T) => {
     setList((l) => {
       setKey(l.length);
       return l.concat([obj]);
     });
-  };
+  }, []);
 
-  const pop = () => {
+  const pop = useCallback(() => {
     // remove keys if necessary
     try {
       keyList.current = keyList.current.slice(0, keyList.current.length - 1);
@@ -113,23 +115,26 @@ export default <T>(initialValue: T[]) => {
     }
 
     setList((l) => l.slice(0, l.length - 1));
-  };
+  }, []);
 
-  const unshift = (obj: T) => {
+  const unshift = useCallback((obj: T) => {
     setList((l) => {
       setKey(0);
       return [obj].concat(l);
     });
-  };
-
-  const sortForm = (result: unknown[]) =>
-    result
-      .map((item, index) => ({ key: index, item })) // add index into obj
-      .sort((a, b) => getIndex(a.key) - getIndex(b.key)) // sort based on the index of table
-      .filter((item) => !!item.item) // remove undefined(s)
-      .map((item) => item.item); // retrive the data
+  }, []);
 
-  const shift = () => {
+  const sortForm = useCallback(
+    (result: unknown[]) =>
+      result
+        .map((item, index) => ({ key: index, item })) // add index into obj
+        .sort((a, b) => getIndex(a.key) - getIndex(b.key)) // sort based on the index of table
+        .filter((item) => !!item.item) // remove undefined(s)
+        .map((item) => item.item), // retrive the data
+    [],
+  );
+
+  const shift = useCallback(() => {
     // remove keys if necessary
     try {
       keyList.current = keyList.current.slice(1, keyList.current.length);
@@ -137,7 +142,7 @@ export default <T>(initialValue: T[]) => {
       console.error(e);
     }
     setList((l) => l.slice(1, l.length));
-  };
+  }, []);
 
   return {
     list,


Test patch:
diff --git a/packages/hooks/src/useDynamicList/__tests__/index.test.ts b/packages/hooks/src/useDynamicList/__tests__/index.test.ts
index 4e4b1265..cc09ae44 100644
--- a/packages/hooks/src/useDynamicList/__tests__/index.test.ts
+++ b/packages/hooks/src/useDynamicList/__tests__/index.test.ts
@@ -142,7 +142,14 @@ describe('useDynamicList', () => {
     });
 
     expect(hook.result.current.list[0]).toEqual(2);
-    expect(hook.result.current.getKey(0)).toEqual(0);
+    expect(hook.result.current.getKey(0)).toEqual(1);
+
+    act(() => {
+      hook.result.current.resetList([3]);
+    });
+
+    expect(hook.result.current.list[0]).toEqual(3);
+    expect(hook.result.current.getKey(0)).toEqual(2);
   });
 
   it('sortForm', () => {