fix useWatch not updating

docs/demo/useWatch-list-level2.md

@@ -0,0 +1,3 @@
+## useWatch-list-level2
+
+<code src="../examples/useWatch-list-level2.tsx"></code>

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 (
+    <div style={{ display: 'flex' }}>
+      <Field name={[name, 'name']}>
+        <Input />
+      </Field>
+      <Field name={[name, 'age']}>
+        <Input />
+      </Field>
+      <div>当前值：{nameValue}</div>
+      <button onClick={() => remove()}>删除</button>
+    </div>
+  );
+};
+
+const Demo = () => {
+  return (
+    <Form initialValues={{ list: [{ name: 'a' }, { name: 'b' }] }}>
+      <Form.List name="list">
+        {(fields, { remove }) => (
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {fields.map(field => (
+              <Child name={field.name} key={field.key} remove={() => remove(field.name)} />
+            ))}
+          </div>
+        )}
+      </Form.List>
+    </Form>
+  );
+};
+
+export default Demo;

src/interface.ts

@@ -209,11 +209,7 @@ export interface Callbacks<Values = any> {
   onFinishFailed?: (errorInfo: ValidateErrorEntity<Values>) => void;
 }
 
-export type WatchCallBack = (
-  values: Store,
-  allValues: Store,
-  namePathList: InternalNamePath[],
-) => void;
+export type WatchCallBack = (values: Store, allValues: Store) => void;
 
 export interface WatchOptions<Form extends FormInstance = FormInstance> {
   form?: Form;

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);

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;