feat:兼容 form 第一次为 undefined (#507)

* feat: done * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: args * feat: test
react-component · Sep 26, 2022 · d09343c · d09343c · vercel · Sep 26, 2022
1 parent d789287
commit d09343c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 4 deletions.
diff --git a/src/useWatch.ts b/src/useWatch.ts
@@ -58,7 +58,8 @@ function useWatch<TForm extends FormInstance>(dependencies: NamePath, form?: TFo
 
 function useWatch<ValueType = Store>(dependencies: NamePath, form?: FormInstance): ValueType;
 
-function useWatch(dependencies: NamePath = [], form?: FormInstance) {
+function useWatch(...args: [NamePath, FormInstance]) {
+  const [dependencies = [], form] = args;
   const [value, setValue] = useState<any>();
 
   const valueStr = useMemo(() => stringify(value), [value]);
@@ -72,7 +73,7 @@ function useWatch(dependencies: NamePath = [], form?: FormInstance) {
   // Warning if not exist form instance
   if (process.env.NODE_ENV !== 'production') {
     warning(
-      isValidForm,
+      args.length === 2 ? (form ? isValidForm : true) : isValidForm,
       'useWatch requires a form instance since it can not auto detect from context.',
     );
   }
@@ -111,7 +112,7 @@ function useWatch(dependencies: NamePath = [], form?: FormInstance) {
 
     // We do not need re-register since namePath content is the same
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [isValidForm],
   );
 
   return value;

diff --git a/tests/useWatch.test.tsx b/tests/useWatch.test.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { mount } from 'enzyme';
 import type { FormInstance } from '../src';
 import { List } from '../src';
@@ -219,6 +219,7 @@ describe('useWatch', () => {
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: useWatch requires a form instance since it can not auto detect from context.',
     );
+    errorSpy.mockRestore();
   });
 
   it('no more render time', () => {
@@ -392,4 +393,38 @@ describe('useWatch', () => {
     const str = stringify(obj);
     expect(typeof str === 'number').toBeTruthy();
   });
+  it('first undefined', () => {
+    const errorSpy = jest.spyOn(console, 'error');
+    const Demo = () => {
+      const formRef = useRef();
+      const name = Form.useWatch('name', formRef.current);
+      const [, setUpdate] = useState({});
+
+      return (
+        <>
+          <div className="setUpdate" onClick={() => setUpdate({})} />
+          <div className="value">{name}</div>
+          <Form ref={formRef} initialValues={{ name: 'default' }}>
+            <Field name="name" key="a">
+              <Input />
+            </Field>
+          </Form>
+        </>
+      );
+    };
+
+    const wrapper = mount(<Demo />);
+    expect(wrapper.find('.value').text()).toEqual('');
+    wrapper.find('.setUpdate').at(0).simulate('click');
+    expect(wrapper.find('.value').text()).toEqual('default');
+    wrapper
+      .find('input')
+      .at(0)
+      .simulate('change', { target: { value: 'bamboo' } });
+    expect(wrapper.find('.value').text()).toEqual('bamboo');
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: useWatch requires a form instance since it can not auto detect from context.',
+    );
+    errorSpy.mockRestore();
+  });
 });