From 2eeae292be094efe0161d947d4681d3554eac17f Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 10:44:08 +0800
Subject: [PATCH 1/6] Wrap context to upder wrap field component to aovid first
 flash

---
 examples/reset.tsx |  3 +++
 src/Field.tsx      | 55 ++++++++++++++++++++++++++++------------------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/examples/reset.tsx b/examples/reset.tsx
index fbdc7881..dfa416cd 100644
--- a/examples/reset.tsx
+++ b/examples/reset.tsx
@@ -36,6 +36,9 @@ const Demo = () => {
         <Item name={['path1', 'path2']} rules={[{ required: true }]}>
           <Input placeholder="nest" />
         </Item>
+        <Item name={['path1', 'path3']} initialValue="bamboo">
+          <Input placeholder="nest" />
+        </Item>
         <button
           type="button"
           onClick={() => {
diff --git a/src/Field.tsx b/src/Field.tsx
index 68822a31..2e4683ae 100644
--- a/src/Field.tsx
+++ b/src/Field.tsx
@@ -76,9 +76,14 @@ export interface InternalFieldProps<Values = any> {
 
   /** @private Passed by Form.List props. Do not use since it will break by path check. */
   isListField?: boolean;
+
+  /** @private Pass context as prop instead of context api
+   *  since class component can not get context in constructor */
+  fieldContext: InternalFormInstance;
 }
 
-export interface FieldProps<Values = any> extends Omit<InternalFieldProps<Values>, 'name'> {
+export interface FieldProps<Values = any>
+  extends Omit<InternalFieldProps<Values>, 'name' | 'fieldContext'> {
   name?: NamePath;
 }
 
@@ -87,8 +92,7 @@ export interface FieldState {
 }
 
 // We use Class instead of Hooks here since it will cost much code by using Hooks.
-class Field extends React.Component<InternalFieldProps, FieldState, InternalFormInstance>
-  implements FieldEntity {
+class Field extends React.Component<InternalFieldProps, FieldState> implements FieldEntity {
   public static contextType = FieldContext;
 
   public static defaultProps = {
@@ -96,15 +100,13 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
     valuePropName: 'value',
   };
 
-  context: InternalFormInstance;
-
   public state = {
     resetCount: 0,
   };
 
   private cancelRegisterFunc: (isListField?: boolean, preserve?: boolean) => void | null = null;
 
-  private destroy = false;
+  private mounted = false;
 
   /**
    * Follow state should not management in State since it will async update by React.
@@ -122,21 +124,29 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
   private errors: string[] = [];
 
   // ============================== Subscriptions ==============================
-  public componentDidMount() {
-    const { shouldUpdate } = this.props;
-    const { getInternalHooks }: InternalFormInstance = this.context;
+  constructor(props: InternalFieldProps) {
+    super(props);
+
+    // Register on init
+    const { getInternalHooks }: InternalFormInstance = props.fieldContext;
     const { registerField } = getInternalHooks(HOOK_MARK);
     this.cancelRegisterFunc = registerField(this);
+  }
+
+  public componentDidMount() {
+    const { shouldUpdate } = this.props;
 
     // One more render for component in case fields not ready
     if (shouldUpdate === true) {
       this.reRender();
     }
+
+    this.mounted = true;
   }
 
   public componentWillUnmount() {
     this.cancelRegister();
-    this.destroy = true;
+    this.mounted = false;
   }
 
   public cancelRegister = () => {
@@ -150,19 +160,19 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
 
   // ================================== Utils ==================================
   public getNamePath = (): InternalNamePath => {
-    const { name } = this.props;
-    const { prefixName = [] }: InternalFormInstance = this.context;
+    const { name, fieldContext } = this.props;
+    const { prefixName = [] }: InternalFormInstance = fieldContext;
 
     return name !== undefined ? [...prefixName, ...name] : [];
   };
 
   public getRules = (): RuleObject[] => {
-    const { rules = [] } = this.props;
+    const { rules = [], fieldContext } = this.props;
 
     return rules.map(
       (rule: Rule): RuleObject => {
         if (typeof rule === 'function') {
-          return rule(this.context);
+          return rule(fieldContext);
         }
         return rule;
       },
@@ -170,12 +180,12 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
   };
 
   public reRender() {
-    if (this.destroy) return;
+    if (!this.mounted) return;
     this.forceUpdate();
   }
 
   public refresh = () => {
-    if (this.destroy) return;
+    if (!this.mounted) return;
 
     /**
      * Clean up current node.
@@ -373,7 +383,7 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
       const meta = this.getMeta();
 
       return {
-        ...this.getOnlyChild(children(this.getControlled(), meta, this.context)),
+        ...this.getOnlyChild(children(this.getControlled(), meta, this.props.fieldContext)),
         isFunction: true,
       };
     }
@@ -389,7 +399,7 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
 
   // ============================== Field Control ==============================
   public getValue = (store?: Store) => {
-    const { getFieldsValue }: FormInstance = this.context;
+    const { getFieldsValue }: FormInstance = this.props.fieldContext;
     const namePath = this.getNamePath();
     return getValue(store || getFieldsValue(true), namePath);
   };
@@ -402,13 +412,14 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
       normalize,
       valuePropName,
       getValueProps,
+      fieldContext,
     } = this.props;
 
     const mergedValidateTrigger =
-      validateTrigger !== undefined ? validateTrigger : this.context.validateTrigger;
+      validateTrigger !== undefined ? validateTrigger : fieldContext.validateTrigger;
 
     const namePath = this.getNamePath();
-    const { getInternalHooks, getFieldsValue }: InternalFormInstance = this.context;
+    const { getInternalHooks, getFieldsValue }: InternalFormInstance = fieldContext;
     const { dispatch } = getInternalHooks(HOOK_MARK);
     const value = this.getValue();
     const mergedGetValueProps = getValueProps || ((val: StoreValue) => ({ [valuePropName]: val }));
@@ -502,6 +513,8 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
 }
 
 function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>) {
+  const fieldContext = React.useContext(FieldContext);
+
   const namePath = name !== undefined ? getNamePath(name) : undefined;
 
   let key: string = 'keep';
@@ -516,7 +529,7 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
     );
   }
 
-  return <Field key={key} name={namePath} {...restProps} />;
+  return <Field key={key} name={namePath} {...restProps} fieldContext={fieldContext} />;
 }
 
 export default WrapperField;

From dd0daa5cddff5d69f7d5381f548a0e0d0d6f5777 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 10:45:49 +0800
Subject: [PATCH 2/6] fix update logic

---
 src/Field.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Field.tsx b/src/Field.tsx
index 2e4683ae..513c58ee 100644
--- a/src/Field.tsx
+++ b/src/Field.tsx
@@ -136,12 +136,12 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
   public componentDidMount() {
     const { shouldUpdate } = this.props;
 
+    this.mounted = true;
+
     // One more render for component in case fields not ready
     if (shouldUpdate === true) {
       this.reRender();
     }
-
-    this.mounted = true;
   }
 
   public componentWillUnmount() {

From 1c3f32ba8a2cc757478d8212743c0a56e7b08cce Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 11:46:27 +0800
Subject: [PATCH 3/6] test: add test case

---
 src/Field.tsx              |  8 +++++---
 tests/field.test.tsx       | 29 +++++++++++++++++++++++++++++
 tests/initialValue.test.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 tests/field.test.tsx

diff --git a/src/Field.tsx b/src/Field.tsx
index 513c58ee..ef14054f 100644
--- a/src/Field.tsx
+++ b/src/Field.tsx
@@ -128,9 +128,11 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     super(props);
 
     // Register on init
-    const { getInternalHooks }: InternalFormInstance = props.fieldContext;
-    const { registerField } = getInternalHooks(HOOK_MARK);
-    this.cancelRegisterFunc = registerField(this);
+    if (props.fieldContext) {
+      const { getInternalHooks }: InternalFormInstance = props.fieldContext;
+      const { registerField } = getInternalHooks(HOOK_MARK);
+      this.cancelRegisterFunc = registerField(this);
+    }
   }
 
   public componentDidMount() {
diff --git a/tests/field.test.tsx b/tests/field.test.tsx
new file mode 100644
index 00000000..5cdf9a54
--- /dev/null
+++ b/tests/field.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Form, { Field } from '../src';
+
+describe('Form.Field', () => {
+  it('field remount should trigger constructor again', () => {
+    const Demo = ({ visible }: { visible: boolean }) => {
+      const [form] = Form.useForm();
+
+      const fieldNode = <Field name="light" initialValue="bamboo" />;
+
+      return <Form form={form}>{visible ? fieldNode : null}</Form>;
+    };
+
+    // First mount
+    const wrapper = mount(<Demo visible />);
+    const instance = wrapper.find('Field').instance() as any;
+    expect(instance.cancelRegisterFunc).toBeTruthy();
+
+    // Hide
+    wrapper.setProps({ visible: false });
+    expect(instance.cancelRegisterFunc).toBeFalsy();
+
+    // Mount again
+    wrapper.setProps({ visible: true });
+    expect(instance.cancelRegisterFunc).toBeFalsy();
+    expect((wrapper.find('Field').instance() as any).cancelRegisterFunc).toBeTruthy();
+  });
+});
diff --git a/tests/initialValue.test.js b/tests/initialValue.test.js
index e5f77e4a..f6ced1eb 100644
--- a/tests/initialValue.test.js
+++ b/tests/initialValue.test.js
@@ -306,5 +306,35 @@ describe('Form.InitialValues', () => {
       wrapper.find('button').simulate('click');
       expect(wrapper.find('input').props().value).toEqual('bamboo');
     });
+
+    it('not initialValue when not mount', () => {
+      let formInstance;
+
+      const Test = () => {
+        const [form] = Form.useForm();
+        formInstance = form;
+
+        const fieldNode = <Field name="bamboo" initialValue="light" />;
+
+        expect(fieldNode).toBeTruthy();
+
+        return (
+          <Form form={form}>
+            <Field name="light" initialValue="bamboo">
+              {control => {
+                expect(control.value).toEqual('bamboo');
+                return null;
+              }}
+            </Field>
+          </Form>
+        );
+      };
+
+      const wrapper = mount(<Test />);
+
+      expect(formInstance.getFieldsValue()).toEqual({ light: 'bamboo' });
+
+      wrapper.unmount();
+    });
   });
 });

From 7dcf0ae4240bdfe45f29edc08da28862dd76821a Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 12:06:31 +0800
Subject: [PATCH 4/6] chore: Update deps

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 86176628..a6c76259 100644
--- a/package.json
+++ b/package.json
@@ -53,10 +53,10 @@
     "enzyme-to-json": "^3.1.4",
     "father": "^2.13.6",
     "np": "^5.0.3",
-    "react": "^v16.9.0-alpha.0",
+    "react": "^16.14.0",
     "react-dnd": "^8.0.3",
     "react-dnd-html5-backend": "^8.0.3",
-    "react-dom": "^v16.9.0-alpha.0",
+    "react-dom": "^16.14.0",
     "react-redux": "^4.4.10",
     "react-router": "^3.0.0",
     "redux": "^3.7.2",

From 343bf5ac5483d2fa78609a0cdca1a28d9fb0743a Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 13:26:35 +0800
Subject: [PATCH 5/6] chore: Update peer deps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a6c76259..3dd253e2 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "now-build": "npm run build"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": ">=16.9.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.5",

From 0749505122edfc87b50b63e262838b9d33ab8e49 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 23 Oct 2020 13:43:48 +0800
Subject: [PATCH 6/6] chore: Update peer deps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3dd253e2..c39b944b 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "now-build": "npm run build"
   },
   "peerDependencies": {
-    "react": ">=16.9.0"
+    "react": "^16.9.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.5",