Workaround for dynamic namePath for Form?
#45041
-
|
Hello, we want to "watch" the value of a for.item that is configurable via props, including the path name. Is there any way to get around the limitation of needing a static path for useWatch with forms? Warning: `useWatch` is not support dynamic `namePath`. Please provide static instead. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
You can do watch on the top level and wrap it: const useMyWatch = (namePath, form) => {
const root = useWatch('');
return get(root, namePath);
}; |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
are you using lodash |
Beta Was this translation helpful? Give feedback.
-
|
Also I tried the solution but it prevents rerenders on the value change since the hook is looking at the root only seems the internal data changes do not trigger renders... |
Beta Was this translation helpful? Give feedback.
-
if you have looked when we use which means every time the control value change, all the watchCb will be called, include the callback registered by private registerWatch: InternalHooks['registerWatch'] = callback => {
this.watchList.push(callback);
return () => {
this.watchList = this.watchList.filter(fn => fn !== callback);
};
};
private notifyWatch = (namePath: InternalNamePath[] = []) => {
// 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);
});
}
};
private updateValue = (name: NamePath, value: StoreValue) => {
const namePath = getNamePath(name);
const prevStore = this.store;
this.updateStore(setValue(this.store, namePath, value));
this.notifyObservers(prevStore, [namePath], {
type: 'valueUpdate',
source: 'internal',
});
this.notifyWatch([namePath]);
...
// in useWatch
const getWatchValue = (values: any, allValues: any) => {
const watchValue = options.preserve ? allValues : values;
return typeof dependencies === 'function'
? dependencies(watchValue)
: getValue(watchValue, namePathRef.current);
};
const cancelRegister = registerWatch((values, allValues) => {
const newValue = getWatchValue(values, allValues);
const nextValueStr = stringify(newValue);
// Compare stringify in case it's nest object
if (valueStrRef.current !== nextValueStr) {
valueStrRef.current = nextValueStr;
setValue(newValue);
}
});about the solution, root will be undefined in my version const useMyWatch = (namePath, form) => {
const root = useWatch('');
return get(root, namePath);
};BUT WARNING: the solution, will cause endless re-render, any value in form change, Let's try to meet halfway on that. type keyType = keyof any;
export const useDynamicWatch = (staticPath: keyType[], dynamicPath: keyType[], form?: FormInstance) => {
const root = Form.useWatch(staticPath, form);
return get(root, dynamicPath);
};only re-render in staticPath's value change, not the whole form |
Beta Was this translation helpful? Give feedback.
You can do watch on the top level and wrap it: