fix: 修复相同 name 的 Field 卸载同时加载 useWatch 返回为 undefined (#451)

* fix: 修复卸载同时加载 watch 返回为 undefined

* feat: 修改逻辑

* feat: 修改逻辑

* feat: 恢复

* feat: 恢复

* feat: coverage

* feat: test

* feat: key

Author: crazyair

src/useWatch.ts

@@ -9,7 +9,7 @@ import { getNamePath, getValue } from './utils/valueUtil';
 type ReturnPromise<T> = T extends Promise<infer ValueType> ? ValueType : never;
 type GetGeneric<TForm extends FormInstance> = ReturnPromise<ReturnType<TForm['validateFields']>>;
 
-function stringify(value: any) {
+export function stringify(value: any) {
   try {
     return JSON.stringify(value);
   } catch (err) {
@@ -97,6 +97,7 @@ function useWatch(dependencies: NamePath = [], form?: FormInstance) {
 
         // Compare stringify in case it's nest object
         if (valueStrRef.current !== nextValueStr) {
+          valueStrRef.current = nextValueStr;
           setValue(newValue);
         }
       });

tests/useWatch.test.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { mount } from 'enzyme';
 import type { FormInstance } from '../src';
 import { List } from '../src';
 import Form, { Field } from '../src';
 import timeout from './common/timeout';
 import { act } from 'react-dom/test-utils';
 import { Input } from './common/InfoField';
+import { stringify } from '../src/useWatch';
 
 describe('useWatch', () => {
   let staticForm: FormInstance<any>;
@@ -350,4 +351,45 @@ describe('useWatch', () => {
 
     expect(updateA > updateB).toBeTruthy();
   });
+
+  it('mount while unmount', () => {
+    const Demo = () => {
+      const [form] = Form.useForm();
+      const [type, setType] = useState(true);
+      const name = Form.useWatch<string>('name', form);
+
+      return (
+        <Form form={form}>
+          <button type="button" onClick={() => setType(c => !c)}>
+            type
+          </button>
+          {type && (
+            <Field name="name" key="a">
+              <Input />
+            </Field>
+          )}
+          {!type && (
+            <Field name="name" key="b">
+              <Input />
+            </Field>
+          )}
+          <div className="value">{name}</div>
+        </Form>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+    wrapper
+      .find('input')
+      .first()
+      .simulate('change', { target: { value: 'bamboo' } });
+    wrapper.find('button').at(0).simulate('click');
+    expect(wrapper.find('.value').text()).toEqual('bamboo');
+  });
+  it('stringify error', () => {
+    const obj: any = {};
+    obj.name = obj;
+    const str = stringify(obj);
+    expect(typeof str === 'number').toBeTruthy();
+  });
 });