fix: form.resetFields cause field component mount twice (#65)

* fix: form.resetFields 会导致 field 子组件 mount 两次

* review

Author: MinJieLiu

src/Field.tsx

@@ -67,7 +67,7 @@ export interface FieldProps {
 }
 
 export interface FieldState {
-  reset: boolean;
+  resetCount: number;
 }
 
 // We use Class instead of Hooks here since it will cost much code by using Hooks.
@@ -82,7 +82,7 @@ class Field extends React.Component<FieldProps, FieldState>
   };
 
   public state = {
-    reset: false,
+    resetCount: 0,
   };
 
   private cancelRegisterFunc: () => void | null = null;
@@ -151,17 +151,11 @@ class Field extends React.Component<FieldProps, FieldState>
     if (this.destroy) return;
 
     /**
-     * We update `reset` state twice to clean up current node.
-     * Which helps to reset value without define the type.
+     * Clean up current node.
      */
-    this.setState(
-      {
-        reset: true,
-      },
-      () => {
-        this.setState({ reset: false });
-      },
-    );
+    this.setState(({ resetCount }) => ({
+      resetCount: resetCount + 1,
+    }));
   };
 
   // ========================= Field Entity Interfaces =========================
@@ -453,7 +447,7 @@ class Field extends React.Component<FieldProps, FieldState>
   };
 
   public render() {
-    const { reset } = this.state;
+    const { resetCount } = this.state;
     const { children } = this.props;
 
     const { child, isFunction } = this.getOnlyChild(children);
@@ -472,12 +466,7 @@ class Field extends React.Component<FieldProps, FieldState>
       returnChildNode = child;
     }
 
-    // Force render a new component to reset all the data
-    if (reset) {
-      return React.createElement(() => <>{returnChildNode}</>);
-    }
-
-    return returnChildNode;
+    return <React.Fragment key={resetCount}>{returnChildNode}</React.Fragment>;
   }
 }
 

tests/index.test.js

@@ -246,6 +246,15 @@ describe('Form.Basic', () => {
 
     it('update and reset should use new initialValues', () => {
       let form;
+      let mountCount = 0;
+
+      const TestInput = props => {
+        React.useEffect(() => {
+          mountCount += 1;
+        }, []);
+
+        return <Input {...props} />;
+      };
 
       const Test = ({ initialValues }) => (
         <Form
@@ -257,6 +266,9 @@ describe('Form.Basic', () => {
           <Field name="username">
             <Input />
           </Field>
+          <Field name="email">
+            <TestInput />
+          </Field>
         </Form>
       );
 
@@ -285,6 +297,7 @@ describe('Form.Basic', () => {
       // Should change it
       form.resetFields();
       wrapper.update();
+      expect(mountCount).toEqual(1);
       expect(form.getFieldsValue()).toEqual({
         username: 'Light',
       });