fix: TypeError ruleErrors.forEach on rule type: 'array' with defaultField (#470)

* fix: TypeError ruleErrors.forEach on rule type: 'array' with defaultField

close ant-design/ant-design#36436

* chore: remove console.log

Author: afc163

docs/examples/validate.tsx

@@ -8,8 +8,8 @@ const { Field } = Form;
 
 const Error = ({ children }) => (
   <ul style={{ color: 'red' }}>
-    {children.map(error => (
-      <li>{error}</li>
+    {children.map((error, i) => (
+      <li key={i}>{error}</li>
     ))}
   </ul>
 );
@@ -38,10 +38,6 @@ export default () => {
     console.log('Finish:', values);
   };
 
-  const onNameError = (errors: string[]) => {
-    console.log('🐞 Name Error Change:', errors);
-  };
-
   return (
     <div style={{ position: 'relative' }}>
       <h3>Validate Form</h3>
@@ -57,7 +53,7 @@ export default () => {
 
           return (
             <React.Fragment>
-              <Field name="username" rules={[{ required: true }]} onError={onNameError}>
+              <Field name="username" rules={[{ required: true }]}>
                 <Input
                   placeholder="Username"
                   onChange={({ target: { value } }) => {

package.json

@@ -78,7 +78,6 @@
     "react-dnd-html5-backend": "^8.0.3",
     "react-dom": "^16.14.0",
     "react-redux": "^4.4.10",
-    "react-router": "^3.0.0",
     "redux": "^3.7.2",
     "typescript": "^4.6.3"
   }

src/Field.tsx

@@ -401,7 +401,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
             // Get errors & warnings
             const nextErrors: string[] = [];
             const nextWarnings: string[] = [];
-            ruleErrors.forEach(({ rule: { warningOnly }, errors = EMPTY_ERRORS }) => {
+            ruleErrors.forEach?.(({ rule: { warningOnly }, errors = EMPTY_ERRORS }) => {
               if (warningOnly) {
                 nextWarnings.push(...errors);
               } else {

src/index.tsx

@@ -3,7 +3,8 @@ import { FormInstance } from './interface';
 import Field from './Field';
 import List from './List';
 import useForm from './useForm';
-import FieldForm, { FormProps } from './Form';
+import type { FormProps } from './Form';
+import FieldForm from './Form';
 import { FormProvider } from './FormContext';
 import FieldContext from './FieldContext';
 import ListContext from './ListContext';
@@ -30,16 +31,8 @@ RefForm.List = List;
 RefForm.useForm = useForm;
 RefForm.useWatch = useWatch;
 
-export {
-  FormInstance,
-  Field,
-  List,
-  useForm,
-  FormProvider,
-  FormProps,
-  FieldContext,
-  ListContext,
-  useWatch,
-};
+export { FormInstance, Field, List, useForm, FormProvider, FieldContext, ListContext, useWatch };
+
+export type { FormProps };
 
 export default RefForm;

src/useForm.ts

@@ -894,7 +894,7 @@ export class FormStore {
               const mergedErrors: string[] = [];
               const mergedWarnings: string[] = [];
 
-              ruleErrors.forEach(({ rule: { warningOnly }, errors }) => {
+              ruleErrors.forEach?.(({ rule: { warningOnly }, errors }) => {
                 if (warningOnly) {
                   mergedWarnings.push(...errors);
                 } else {

tests/legacy/validate-array.test.js

@@ -55,4 +55,35 @@ describe('legacy.validate-array', () => {
       );
     }
   });
+
+  // https://github.com/ant-design/ant-design/issues/36436
+  it('antd issue #36436', async () => {
+    let form;
+
+    mount(
+      <div>
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <Field
+            name="tags"
+            rules={[
+              {
+                type: 'array',
+                defaultField: { type: 'string' },
+              },
+            ]}
+          >
+            <input />
+          </Field>
+        </Form>
+      </div>,
+    );
+
+    expect(async () => {
+      await form.validateFields();
+    }).not.toThrow();
+  });
 });