diff --git a/docs/examples/useWatch-selector.tsx b/docs/examples/useWatch-selector.tsx index 7ecde689..037b6bd4 100644 --- a/docs/examples/useWatch-selector.tsx +++ b/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(); + 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 ( <>
diff --git a/src/useWatch.ts b/src/useWatch.ts index 8052e589..b3f93e83 100644 --- a/src/useWatch.ts +++ b/src/useWatch.ts @@ -92,7 +92,9 @@ function useWatch( const options = isFormInstance(_form) ? { form: _form } : _form; const form = options.form; - const [value, setValue] = useState(); + const [value, setValue] = useState(() => + 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' diff --git a/tests/useWatch.test.tsx b/tests/useWatch.test.tsx index 78522bc3..b26dfcf1 100644 --- a/tests/useWatch.test.tsx +++ b/tests/useWatch.test.tsx @@ -518,4 +518,22 @@ describe('useWatch', () => { await changeValue(input[0], 'bamboo2'); expect(container.querySelector('.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 ( + + + + + + ); + }; + render(); + expect(list[0]).toEqual({}); + expect(list[1]).toEqual({ name: 'bamboo' }); + }); });