fix(FormList): 修复FormList组件使用form setFieldsValue、reset异常 (#2406)

* fix(FormList): 1. 忽略首次执行，避免setFieldsValue异常 2. 修复reset无效 * fix(FormList): 调整FormList测试用例
Tencent · Aug 24, 2023 · d41533e · d41533e
1 parent c596865
commit d41533e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/src/form/FormList.tsx b/src/form/FormList.tsx
@@ -11,13 +11,19 @@ import log from '../_common/js/log';
 let key = 0;
 
 const FormList: React.FC<TdFormListProps> = (props) => {
-  const { formMapRef, form, onFormItemValueChange, initialData: initialDataFromForm } = useFormContext();
+  const {
+    formMapRef,
+    form,
+    onFormItemValueChange,
+    initialData: initialDataFromForm,
+    resetType: resetTypeFromContext,
+  } = useFormContext();
   const { name, rules, children } = props;
 
   const initialData = props.initialData || get(initialDataFromForm, name) || [];
 
   const [formListValue, setFormListValue] = useState(initialData);
-  const [fields, setFields] = useState<Array<FormListField>>(
+  const [fields, setFields] = useState<Array<FormListField>>(() =>
     initialData.map((data, index) => ({
       data: { ...data },
       key: (key += 1),
@@ -33,6 +39,15 @@ const FormList: React.FC<TdFormListProps> = (props) => {
     .filter((item) => item !== undefined)
     .join('_'); // 转化 name
 
+  const isMounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    [],
+  );
+
   const operation: FormListFieldOperation = {
     add(defaultValue?: any, insertIndex?: number) {
       const cloneFields = [...fields];
@@ -119,6 +134,10 @@ const FormList: React.FC<TdFormListProps> = (props) => {
   }, [formListValue]);
 
   useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
     // fields 变化通知 watch 事件
     form?.getInternalHooks?.(HOOK_MARK)?.notifyWatch?.(name);
 
@@ -207,11 +226,26 @@ const FormList: React.FC<TdFormListProps> = (props) => {
           originData,
         );
       },
-      resetField: () => {
+      resetField: (type: string) => {
+        const resetType = type || resetTypeFromContext;
         [...formListMapRef.current.values()].forEach((formItemRef) => {
           formItemRef?.current?.resetField?.();
         });
         setFormListValue([]);
+        fieldsTaskQueueRef.current = [];
+        key = 0;
+        if (resetType === 'initial') {
+          setFields(
+            initialData.map((data, index) => ({
+              data: { ...data },
+              key: (key += 1),
+              name: index,
+              isListField: true,
+            })),
+          );
+        } else {
+          setFields([]);
+        }
       },
       setValidateMessage: (fieldData) => {
         [...formListMapRef.current.values()].forEach((formItemRef) => {

diff --git a/src/form/__tests__/form-list.test.tsx b/src/form/__tests__/form-list.test.tsx
@@ -102,9 +102,12 @@ describe('Form List 组件测试', () => {
     fireEvent.click(resetBtn);
     fireEvent.click(submitBtn);
     await mockTimeout(() => true);
-    expect(queryByText('省份必填')).toBeTruthy();
-    expect(queryByText('地区必填')).toBeTruthy();
+    expect(queryByText('guangdong')).not.toBeTruthy();
+    expect(queryByText('shenzhen')).not.toBeTruthy();
 
+    fireEvent.click(addBtn);
+    expect(queryByDisplayValue('guangdong')).toBeTruthy();
+    expect(queryByDisplayValue('shenzhen')).toBeTruthy();
     const removeBtn = container.querySelector('.test-remove');
     fireEvent.click(removeBtn);
     expect(queryByDisplayValue('guangdong')).not.toBeTruthy();
@@ -121,11 +124,10 @@ describe('Form List 组件测试', () => {
     fireEvent.click(queryByText('validateOnly'));
     await mockTimeout(() => true);
     expect(queryByText('省份必填')).not.toBeTruthy();
-    fireEvent.click(queryByText('reset'));
     fireEvent.click(queryByText('validate'));
     await mockTimeout(() => true);
-    expect(queryByText('省份必填')).toBeTruthy();
+    expect(queryByText('地区必填')).toBeTruthy();
     fireEvent.click(queryByText('clearValidate'));
-    expect(queryByText('省份必填')).not.toBeTruthy();
+    expect(queryByText('地区必填')).not.toBeTruthy();
   });
 });