Form.List name 不在 onFinish 取值中

docs/demo/list-unmount.md

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

docs/examples/list-unmount.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import Form from 'rc-field-form';
+import Input from './components/Input';
+import LabelField from './components/LabelField';
+
+const Demo = () => {
+  const [form] = Form.useForm();
+  const [isShow, setIsShow] = useState(true);
+
+  return (
+    <div>
+      <Form
+        form={form}
+        onFinish={values => {
+          console.log(JSON.stringify(values, null, 2));
+          console.log(JSON.stringify(form.getFieldsValue({ strict: true }), null, 2));
+        }}
+        initialValues={{
+          users: [
+            { name: 'a', age: '1' },
+            { name: 'b', age: '2' },
+          ],
+        }}
+      >
+        <Form.Field shouldUpdate>{() => JSON.stringify(form.getFieldsValue(), null, 2)}</Form.Field>
+
+        <Form.List name="users">
+          {fields => {
+            return (
+              <div>
+                {fields.map(field => (
+                  <div key={field.key} style={{ display: 'flex', gap: 10 }}>
+                    <LabelField name={[field.name, 'name']}>
+                      <Input />
+                    </LabelField>
+                    {isShow && (
+                      <LabelField name={[field.name, 'age']}>
+                        <Input />
+                      </LabelField>
+                    )}
+                  </div>
+                ))}
+              </div>
+            );
+          }}
+        </Form.List>
+        <button type="button" onClick={() => setIsShow(c => !c)}>
+          隐藏
+        </button>
+        <button type="submit">Submit</button>
+      </Form>
+    </div>
+  );
+};
+
+export default Demo;

src/useForm.ts

@@ -910,6 +910,8 @@ export class FormStore {
     const namePathList: InternalNamePath[] | undefined = provideNameList
       ? nameList.map(getNamePath)
       : [];
+    // Same namePathList, but does not include Form.List name
+    const finalValueNamePathList = [...namePathList];
 
     // Collect result in promise list
     const promiseList: Promise<FieldError>[] = [];
@@ -921,9 +923,17 @@ export class FormStore {
     const { recursive, dirty } = options || {};
 
     this.getFieldEntities(true).forEach((field: FieldEntity) => {
+      const fieldNamePath = field.getNamePath();
+
       // Add field if not provide `nameList`
       if (!provideNameList) {
-        namePathList.push(field.getNamePath());
+        if (
+          // When Form.List has a value, filter Form.List `name`
+          !(field.isList() && namePathList.some(name => matchNamePath(name, fieldNamePath, true)))
+        ) {
+          finalValueNamePathList.push(fieldNamePath);
+        }
+        namePathList.push(fieldNamePath);
       }
 
       // Skip if without rule
@@ -936,7 +946,6 @@ export class FormStore {
         return;
       }
 
-      const fieldNamePath = field.getNamePath();
       validateNamePathList.add(fieldNamePath.join(TMP_SPLIT));
 
       // Add field validate rule in to promise list
@@ -1000,7 +1009,7 @@ export class FormStore {
     const returnPromise: Promise<Store | ValidateErrorEntity | string[]> = summaryPromise
       .then((): Promise<Store | string[]> => {
         if (this.lastValidatePromise === summaryPromise) {
-          return Promise.resolve(this.getFieldsValue(namePathList));
+          return Promise.resolve(this.getFieldsValue(finalValueNamePathList));
         }
         return Promise.reject<string[]>([]);
       })

tests/list.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render, act } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import Form, { Field, List } from '../src';
@@ -937,4 +937,98 @@ describe('Form.List', () => {
 
     expect(formRef.current!.getFieldValue('list')).toEqual([{ user: '1' }, { user: '3' }]);
   });
+
+  it('list unmount', async () => {
+    const valueRef = React.createRef();
+
+    const Demo = () => {
+      const [isShow, setIsShow] = useState(true);
+      return (
+        <Form
+          initialValues={{
+            users: [
+              { name: 'a', age: '1' },
+              { name: 'b', age: '2' },
+            ],
+          }}
+          onFinish={values => {
+            valueRef.current = values;
+          }}
+        >
+          <Form.List name="users">
+            {fields => {
+              return fields.map(field => (
+                <div key={field.key} style={{ display: 'flex', gap: 10 }}>
+                  <InfoField name={[field.name, 'name']}>
+                    <Input />
+                  </InfoField>
+                  {isShow && (
+                    <InfoField name={[field.name, 'age']}>
+                      <Input />
+                    </InfoField>
+                  )}
+                </div>
+              ));
+            }}
+          </Form.List>
+          <button data-testid="hide" type="button" onClick={() => setIsShow(c => !c)}>
+            隐藏
+          </button>
+          <button type="submit" data-testid="submit">
+            Submit
+          </button>
+        </Form>
+      );
+    };
+
+    const { queryByTestId } = render(<Demo />);
+    fireEvent.click(queryByTestId('submit'));
+    await act(async () => {
+      await timeout();
+    });
+    expect(valueRef.current).toEqual({
+      users: [
+        { name: 'a', age: '1' },
+        { name: 'b', age: '2' },
+      ],
+    });
+
+    fireEvent.click(queryByTestId('hide'));
+    fireEvent.click(queryByTestId('submit'));
+    await act(async () => {
+      await timeout();
+    });
+    expect(valueRef.current).toEqual({ users: [{ name: 'a' }, { name: 'b' }] });
+  });
+
+  it('list rules', async () => {
+    const onFinishFailed = jest.fn();
+
+    const Demo = () => {
+      return (
+        <Form onFinishFailed={onFinishFailed}>
+          <Form.List name="users" rules={[{ validator: () => Promise.reject('error') }]}>
+            {fields => {
+              return fields.map(field => (
+                <InfoField name={[field.name, 'name']} key={field.key}>
+                  <Input />
+                </InfoField>
+              ));
+            }}
+          </Form.List>
+          <button type="submit" data-testid="submit">
+            Submit
+          </button>
+        </Form>
+      );
+    };
+
+    const { queryByTestId } = render(<Demo />);
+    fireEvent.click(queryByTestId('submit'));
+    await act(async () => {
+      await timeout();
+    });
+
+    expect(onFinishFailed).toHaveBeenCalled();
+  });
 });