From 10a006be353bfc4ad59435ff59870ef2c9743bd8 Mon Sep 17 00:00:00 2001 From: crazyair <645381995@qq.com> Date: Sun, 22 Jun 2025 19:30:11 +0800 Subject: [PATCH 1/5] feat: test --- docs/examples/basic.tsx | 74 ++++++++++++++++++----------------------- src/interface.ts | 6 +--- src/useForm.ts | 17 +++++----- 3 files changed, 43 insertions(+), 54 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index 48a46fc14..61672fb6b 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -1,51 +1,43 @@ -import Form, { Field } from 'rc-field-form'; import React from 'react'; -import Input from './components/Input'; +import get from 'lodash/get'; -type FormData = { - name?: string; - password?: string; - password2?: string; -}; +import Form, { Field } from 'rc-field-form'; +import Input from './components/Input'; -export default () => { - const [form] = Form.useForm(); +const Child = ({ name, remove }: { name: any; remove: () => void }) => { + // console.log('22', name); + const nameValue = Form.useWatch(values => { + console.log('name', name); + return get(values, ['list', name, 'name']); + }); + // const nameValue2 = Form.useWatch(['list', name, 'name']); return ( -
{ - console.error('fields:', fields); - }} - > - name="name"> - - - - dependencies={['name']}> - {() => { - return form.getFieldValue('name') === '1' ? ( - - - - ) : null; - }} - - - - {() => { - const password = form.getFieldValue('password'); - console.log('>>>', password); - return password ? ( - name={['password2']}> - - - ) : null; - }} +
+ + +
当前值：{nameValue}
+ {/*
当前值2：{nameValue2}
*/} + +
+ ); +}; - +const Demo = () => { + return ( + + + {(fields, { remove }) => ( +
+ {fields.map(field => ( + remove(field.name)} /> + ))} +
+ )} + ); }; + +export default Demo; diff --git a/src/interface.ts b/src/interface.ts index 482f6d098..78b77c6c3 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -209,11 +209,7 @@ export interface Callbacks { onFinishFailed?: (errorInfo: ValidateErrorEntity) => void; } -export type WatchCallBack = ( - values: Store, - allValues: Store, - namePathList: InternalNamePath[], -) => void; +export type WatchCallBack = (values: Store, allValues: Store) => void; export interface WatchOptions
{ form?: Form; diff --git a/src/useForm.ts b/src/useForm.ts index cb9c5f095..f946fc8e7 100644 --- a/src/useForm.ts +++ b/src/useForm.ts @@ -202,14 +202,14 @@ export class FormStore { }; }; - private notifyWatch = (namePath: InternalNamePath[] = []) => { + private notifyWatch = () => { // No need to cost perf when nothing need to watch if (this.watchList.length) { const values = this.getFieldsValue(); const allValues = this.getFieldsValue(true); this.watchList.forEach(callback => { - callback(values, allValues, namePath); + callback(values, allValues); }); } }; @@ -566,7 +566,7 @@ export class FormStore { }); this.resetWithFieldInitialValue({ namePathList }); this.notifyObservers(prevStore, namePathList, { type: 'reset' }); - this.notifyWatch(namePathList); + this.notifyWatch(); }; private setFields = (fields: FieldData[]) => { @@ -592,7 +592,7 @@ export class FormStore { }); }); - this.notifyWatch(namePathList); + this.notifyWatch(); }; private getFields = (): InternalFieldData[] => { @@ -642,7 +642,7 @@ export class FormStore { private registerField = (entity: FieldEntity) => { this.fieldEntities.push(entity); const namePath = entity.getNamePath(); - this.notifyWatch([namePath]); + this.notifyWatch(); // Set initial values if (entity.props.initialValue !== undefined) { @@ -656,6 +656,7 @@ export class FormStore { // un-register field callback return (isListField?: boolean, preserve?: boolean, subNamePath: InternalNamePath = []) => { + console.log('isListField', isListField, subNamePath); this.fieldEntities = this.fieldEntities.filter(item => item !== entity); // Clean up store value if not preserve @@ -681,8 +682,8 @@ export class FormStore { this.triggerDependenciesUpdate(prevStore, namePath); } } - - this.notifyWatch([namePath]); + console.log('namePath', namePath); + this.notifyWatch(); }; }; @@ -748,7 +749,7 @@ export class FormStore { type: 'valueUpdate', source: 'internal', }); - this.notifyWatch([namePath]); + this.notifyWatch(); // Dependencies update const childrenFields = this.triggerDependenciesUpdate(prevStore, namePath); From 3346b0f295e40ed867a00bc520b1961f3435877c Mon Sep 17 00:00:00 2001 From: crazyair <645381995@qq.com> Date: Sun, 22 Jun 2025 20:48:38 +0800 Subject: [PATCH 2/5] feat: test --- docs/examples/basic.tsx | 7 +++---- src/useForm.ts | 2 -- src/useWatch.ts | 10 +++++----- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index 61672fb6b..b371512c2 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -5,20 +5,19 @@ import Form, { Field } from 'rc-field-form'; import Input from './components/Input'; const Child = ({ name, remove }: { name: any; remove: () => void }) => { - // console.log('22', name); const nameValue = Form.useWatch(values => { - console.log('name', name); return get(values, ['list', name, 'name']); }); - // const nameValue2 = Form.useWatch(['list', name, 'name']); return (
+ + +
当前值：{nameValue}
- {/*
当前值2：{nameValue2}
*/}
); diff --git a/src/useForm.ts b/src/useForm.ts index f946fc8e7..c14021d03 100644 --- a/src/useForm.ts +++ b/src/useForm.ts @@ -656,7 +656,6 @@ export class FormStore { // un-register field callback return (isListField?: boolean, preserve?: boolean, subNamePath: InternalNamePath = []) => { - console.log('isListField', isListField, subNamePath); this.fieldEntities = this.fieldEntities.filter(item => item !== entity); // Clean up store value if not preserve @@ -682,7 +681,6 @@ export class FormStore { this.triggerDependenciesUpdate(prevStore, namePath); } } - console.log('namePath', namePath); this.notifyWatch(); }; }; diff --git a/src/useWatch.ts b/src/useWatch.ts index 08e8c5344..18e29218a 100644 --- a/src/useWatch.ts +++ b/src/useWatch.ts @@ -128,7 +128,7 @@ function useWatch( namePathRef.current = namePath; useWatchWarning(namePath); - + console.log('valueStr', valueStr); useEffect( () => { // Skip if not exist form instance @@ -148,11 +148,11 @@ function useWatch( const cancelRegister = registerWatch((values, allValues) => { const newValue = getWatchValue(values, allValues); - const nextValueStr = stringify(newValue); + const newValueStr = stringify(newValue); // Compare stringify in case it's nest object - if (valueStrRef.current !== nextValueStr) { - valueStrRef.current = nextValueStr; + if (valueStrRef.current !== newValueStr) { + valueStrRef.current = newValueStr; setValue(newValue); } }); @@ -171,7 +171,7 @@ function useWatch( // We do not need re-register since namePath content is the same // eslint-disable-next-line react-hooks/exhaustive-deps - [isValidForm], + [isValidForm, valueStr], ); return value; From 7f8525e57d39042722f858f2aece51158acd35a4 Mon Sep 17 00:00:00 2001 From: crazyair <645381995@qq.com> Date: Sun, 22 Jun 2025 20:51:16 +0800 Subject: [PATCH 3/5] feat: test --- docs/examples/useWatch-list-level2.tsx | 42 ++++++++++++++++++++++++++ src/useForm.ts | 1 + src/useWatch.ts | 1 - 3 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 docs/examples/useWatch-list-level2.tsx diff --git a/docs/examples/useWatch-list-level2.tsx b/docs/examples/useWatch-list-level2.tsx new file mode 100644 index 000000000..b371512c2 --- /dev/null +++ b/docs/examples/useWatch-list-level2.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import get from 'lodash/get'; + +import Form, { Field } from 'rc-field-form'; +import Input from './components/Input'; + +const Child = ({ name, remove }: { name: any; remove: () => void }) => { + const nameValue = Form.useWatch(values => { + return get(values, ['list', name, 'name']); + }); + + return ( +
+ + + + + + +
当前值：{nameValue}
+ +
+ ); +}; + +const Demo = () => { + return ( + + + {(fields, { remove }) => ( +
+ {fields.map(field => ( + remove(field.name)} /> + ))} +
+ )} + +
+ ); +}; + +export default Demo; diff --git a/src/useForm.ts b/src/useForm.ts index c14021d03..11bdb79c8 100644 --- a/src/useForm.ts +++ b/src/useForm.ts @@ -681,6 +681,7 @@ export class FormStore { this.triggerDependenciesUpdate(prevStore, namePath); } } + this.notifyWatch(); }; }; diff --git a/src/useWatch.ts b/src/useWatch.ts index 18e29218a..7446f2316 100644 --- a/src/useWatch.ts +++ b/src/useWatch.ts @@ -128,7 +128,6 @@ function useWatch( namePathRef.current = namePath; useWatchWarning(namePath); - console.log('valueStr', valueStr); useEffect( () => { // Skip if not exist form instance From 20a37a8f28b16b6b85316bf91bae4bb6ca10c803 Mon Sep 17 00:00:00 2001 From: crazyair <645381995@qq.com> Date: Sun, 22 Jun 2025 20:56:59 +0800 Subject: [PATCH 4/5] feat: test --- docs/examples/basic.tsx | 71 +++++++++++++++++++++++------------------ 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index b371512c2..48a46fc14 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -1,42 +1,51 @@ -import React from 'react'; -import get from 'lodash/get'; - import Form, { Field } from 'rc-field-form'; +import React from 'react'; import Input from './components/Input'; -const Child = ({ name, remove }: { name: any; remove: () => void }) => { - const nameValue = Form.useWatch(values => { - return get(values, ['list', name, 'name']); - }); +type FormData = { + name?: string; + password?: string; + password2?: string; +}; + +export default () => { + const [form] = Form.useForm(); return ( -
- - +
{ + console.error('fields:', fields); + }} + > + name="name"> + + + + dependencies={['name']}> + {() => { + return form.getFieldValue('name') === '1' ? ( + + + + ) : null; + }} - - + + + {() => { + const password = form.getFieldValue('password'); + console.log('>>>', password); + return password ? ( + name={['password2']}> + + + ) : null; + }} -
当前值：{nameValue}
- -
- ); -}; -const Demo = () => { - return ( - - - {(fields, { remove }) => ( -
- {fields.map(field => ( - remove(field.name)} /> - ))} -
- )} - + ); }; - -export default Demo; From 3288f64d2299d98ff23b95e1b96f2f3f88ac4399 Mon Sep 17 00:00:00 2001 From: crazyair <645381995@qq.com> Date: Sun, 22 Jun 2025 20:57:46 +0800 Subject: [PATCH 5/5] feat: test --- docs/demo/useWatch-list-level2.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 docs/demo/useWatch-list-level2.md diff --git a/docs/demo/useWatch-list-level2.md b/docs/demo/useWatch-list-level2.md new file mode 100644 index 000000000..6852825d3 --- /dev/null +++ b/docs/demo/useWatch-list-level2.md @@ -0,0 +1,3 @@ +## useWatch-list-level2 + +