diff --git a/docs/demo/useWatch-list-level2.md b/docs/demo/useWatch-list-level2.md new file mode 100644 index 00000000..6852825d --- /dev/null +++ b/docs/demo/useWatch-list-level2.md @@ -0,0 +1,3 @@ +## useWatch-list-level2 + + diff --git a/docs/examples/useWatch-list-level2.tsx b/docs/examples/useWatch-list-level2.tsx new file mode 100644 index 00000000..b371512c --- /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/interface.ts b/src/interface.ts index 482f6d09..78b77c6c 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 cb9c5f09..11bdb79c 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) { @@ -682,7 +682,7 @@ export class FormStore { } } - this.notifyWatch([namePath]); + this.notifyWatch(); }; }; @@ -748,7 +748,7 @@ export class FormStore { type: 'valueUpdate', source: 'internal', }); - this.notifyWatch([namePath]); + this.notifyWatch(); // Dependencies update const childrenFields = this.triggerDependenciesUpdate(prevStore, namePath); diff --git a/src/useWatch.ts b/src/useWatch.ts index 08e8c534..7446f231 100644 --- a/src/useWatch.ts +++ b/src/useWatch.ts @@ -128,7 +128,6 @@ function useWatch( namePathRef.current = namePath; useWatchWarning(namePath); - useEffect( () => { // Skip if not exist form instance @@ -148,11 +147,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 +170,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;