fix: onFieldsChange in strict mode (#228)

* revert: register in constructor

* fix: Initial field pathed value

* fix: Logic of double rendered

Author: zombieJ

src/Field.tsx

@@ -133,16 +133,23 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     // Register on init
     if (props.fieldContext) {
       const { getInternalHooks }: InternalFormInstance = props.fieldContext;
-      const { registerField } = getInternalHooks(HOOK_MARK);
-      this.cancelRegisterFunc = registerField(this);
+      const { initEntityValue } = getInternalHooks(HOOK_MARK);
+      initEntityValue(this);
     }
   }
 
   public componentDidMount() {
-    const { shouldUpdate } = this.props;
+    const { shouldUpdate, fieldContext } = this.props;
 
     this.mounted = true;
 
+    // Register on init
+    if (fieldContext) {
+      const { getInternalHooks }: InternalFormInstance = fieldContext;
+      const { registerField } = getInternalHooks(HOOK_MARK);
+      this.cancelRegisterFunc = registerField(this);
+    }
+
     // One more render for component in case fields not ready
     if (shouldUpdate === true) {
       this.reRender();

src/FieldContext.ts

@@ -29,6 +29,7 @@ const Context = React.createContext<InternalFormInstance>({
 
     return {
       dispatch: warningFunc,
+      initEntityValue: warningFunc,
       registerField: warningFunc,
       useSubscribe: warningFunc,
       setInitialValues: warningFunc,

src/interface.ts

@@ -181,6 +181,7 @@ export interface Callbacks<Values = any> {
 
 export interface InternalHooks {
   dispatch: (action: ReducerAction) => void;
+  initEntityValue: (entity: FieldEntity) => void;
   registerField: (entity: FieldEntity) => () => void;
   useSubscribe: (subscribable: boolean) => void;
   setInitialValues: (values: Store, init: boolean) => void;

src/useForm.ts

@@ -100,6 +100,7 @@ export class FormStore {
 
       return {
         dispatch: this.dispatch,
+        initEntityValue: this.initEntityValue,
         registerField: this.registerField,
         useSubscribe: this.useSubscribe,
         setInitialValues: this.setInitialValues,
@@ -504,6 +505,22 @@ export class FormStore {
   };
 
   // =========================== Observer ===========================
+  /**
+   * This only trigger when a field is on constructor to avoid we get initialValue too late
+   */
+  private initEntityValue = (entity: FieldEntity) => {
+    const { initialValue } = entity.props;
+
+    if (initialValue !== undefined) {
+      const namePath = entity.getNamePath();
+      const prevValue = getValue(this.store, namePath);
+
+      if (prevValue === undefined) {
+        this.store = setValue(this.store, namePath, initialValue);
+      }
+    }
+  };
+
   private registerField = (entity: FieldEntity) => {
     this.fieldEntities.push(entity);
 

tests/strict.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Form from '../src';
+import InfoField, { Input } from './common/InfoField';
+import { changeValue } from './common';
+
+describe('Form.ReactStrict', () => {
+  it('should not register twice', async () => {
+    const onFieldsChange = jest.fn();
+
+    const wrapper = mount(
+      <React.StrictMode>
+        <Form name="testForm" onFieldsChange={onFieldsChange}>
+          <InfoField name="input">
+            <Input />
+          </InfoField>
+        </Form>
+      </React.StrictMode>,
+    );
+
+    await changeValue(wrapper, 'bamboo');
+
+    expect(onFieldsChange).toHaveBeenCalledTimes(1);
+    expect(onFieldsChange.mock.calls[0][1]).toHaveLength(1);
+  });
+});