enhance: useWatch selector init (#762)

* feat: useWatch support dynamic names

* fix: lint

* feat: useWatch init object

* feat: review

* feat: review

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: crazyair

docs/examples/useWatch-selector.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import React from 'react';
 import Form, { Field } from 'rc-field-form';
 import Input from './components/Input';
@@ -10,11 +11,15 @@ type FieldType = {
 
 export default () => {
   const [form] = Form.useForm<FieldType>();
+  const firstEmptyObject = Form.useWatch(values => ({ newName: values.name }), form);
+  console.log('firstEmptyObject', firstEmptyObject);
+
   const values = Form.useWatch(
     values => ({ init: values.init, newName: values.name, newAge: values.age }),
     { form, preserve: true },
   );
   console.log('values', values);
+
   return (
     <>
       <Form form={form} initialValues={{ init: 'init', name: 'aaa' }}>

src/useWatch.ts

@@ -92,7 +92,9 @@ function useWatch(
   const options = isFormInstance(_form) ? { form: _form } : _form;
   const form = options.form;
 
-  const [value, setValue] = useState<any>();
+  const [value, setValue] = useState<any>(() =>
+    typeof dependencies === 'function' ? dependencies({}) : undefined,
+  );
 
   const valueStr = useMemo(() => stringify(value), [value]);
   const valueStrRef = useRef(valueStr);
@@ -117,8 +119,8 @@ function useWatch(
   // ============================= Update =============================
   const triggerUpdate = useEvent((values?: any, allValues?: any) => {
     const watchValue = options.preserve
-      ? (allValues ?? getFieldsValue(true))
-      : (values ?? getFieldsValue());
+      ? allValues ?? getFieldsValue(true)
+      : values ?? getFieldsValue();
 
     const nextValue =
       typeof dependencies === 'function'

tests/useWatch.test.tsx

@@ -518,4 +518,22 @@ describe('useWatch', () => {
     await changeValue(input[0], 'bamboo2');
     expect(container.querySelector<HTMLDivElement>('.values')?.textContent).toEqual('bamboo2');
   });
+  it('selector by first no undefined', async () => {
+    const list: any[] = [];
+    const Demo = () => {
+      const [form] = Form.useForm<{ name?: string }>();
+      const data = Form.useWatch(values => values, form);
+      list.push(data);
+      return (
+        <Form form={form}>
+          <Field name="name" initialValue="bamboo">
+            <Input />
+          </Field>
+        </Form>
+      );
+    };
+    render(<Demo />);
+    expect(list[0]).toEqual({});
+    expect(list[1]).toEqual({ name: 'bamboo' });
+  });
 });