<FieldArray />

<FieldArray /> 是一个组件，用于帮助处理常见的数组/列表操作。您可以向其传递一个 name 属性，该属性包含 values 中保存相关数组的键的路径。然后，<FieldArray /> 将通过渲染属性为您提供对数组辅助方法的访问权限。为了方便起见，调用这些方法将触发验证并为您管理 touched。

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik';
3 
4 // Here is an example of a form with an editable list.
5 // Next to each input are buttons for insert and remove.
6 // If the list is empty, there is a button to add an item.
7 export const FriendList = () => (
8   <div>
9     <h1>Friend List</h1>
10     <Formik
11       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
12       onSubmit={values =>
13         setTimeout(() => {
14           alert(JSON.stringify(values, null, 2));
15         }, 500)
16       }
17       render={({ values }) => (
18         <Form>
19           <FieldArray
20             name="friends"
21             render={arrayHelpers => (
22               <div>
23                 {values.friends && values.friends.length > 0 ? (
24                   values.friends.map((friend, index) => (
25                     <div key={index}>
26                       <Field name={`friends.${index}`} />
27                       <button
28                         type="button"
29                         onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
30                       >
31                         -
32                       </button>
33                       <button
34                         type="button"
35                         onClick={() => arrayHelpers.insert(index, '')} // insert an empty string at a position
36                       >
37                         +
38                       </button>
39                     </div>
40                   ))
41                 ) : (
42                   <button type="button" onClick={() => arrayHelpers.push('')}>
43                     {/* show this when user has removed all friends from the list */}
44                     Add a friend
45                   </button>
46                 )}
47                 <div>
48                   <button type="submit">Submit</button>
49                 </div>
50               </div>
51             )}
52           />
53         </Form>
54       )}
55     />
56   </div>
57 );

`name: string`

在 values 中相关键的名称或路径。

`validateOnChange?: boolean`

默认为 true。确定是否应该或不应该在任何数组操作之后运行表单验证。

FieldArray 对象数组

您还可以通过遵循 object[index].property 或 object.index.property 的约定来遍历对象数组，作为 <Field /> 或 <input /> 元素在 <FieldArray /> 中的 name 属性。

1 <Form>
2   <FieldArray
3     name="friends"
4     render={arrayHelpers => (
5       <div>
6         {values.friends.map((friend, index) => (
7           <div key={index}>
8             {/** both these conventions do the same */}
9             <Field name={`friends[${index}].name`} />
10             <Field name={`friends.${index}.age`} />
11 
12             <button type="button" onClick={() => arrayHelpers.remove(index)}>
13               -
14             </button>
15           </div>
16         ))}
17         <button
18           type="button"
19           onClick={() => arrayHelpers.push({ name: '', age: '' })}
20         >
21           +
22         </button>
23       </div>
24     )}
25   />
26 </Form>

FieldArray 验证注意事项

使用 <FieldArray> 进行验证可能很棘手。

如果您使用 validationSchema 并且您的表单具有数组验证要求（如最小长度）以及嵌套数组字段要求，则显示错误可能很棘手。Formik/Yup 将从内到外显示验证错误。例如，

1 const schema = Yup.object().shape({
2   friends: Yup.array()
3     .of(
4       Yup.object().shape({
5         name: Yup.string().min(4, 'too short').required('Required'), // these constraints take precedence
6         salary: Yup.string().min(3, 'cmon').required('Required'), // these constraints take precedence
7       })
8     )
9     .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
10     .min(3, 'Minimum of 3 friends'),
11 });

由于 Yup 和您的自定义验证函数始终应将错误消息输出为字符串，因此在显示错误消息时，您需要嗅探嵌套错误是数组还是字符串。

所以……要显示 'Must have friends' 和 'Minimum of 3 friends'（我们示例中的数组验证约束）……

错误

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   errors.friends ? <div>{errors.friends}</div> : null; // app will crash

正确

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   typeof errors.friends === 'string' ? <div>{errors.friends}</div> : null;

对于嵌套字段错误，您应该假设除非您已检查过，否则对象中的任何部分均未定义。因此，您可能希望自己创建一个自定义的 <ErrorMessage /> 组件，如下所示

1 import { Field, getIn } from 'formik';
2 
3 const ErrorMessage = ({ name }) => (
4   <Field
5     name={name}
6     render={({ form }) => {
7       const error = getIn(form.errors, name);
8       const touch = getIn(form.touched, name);
9       return touch && error ? error : null;
10     }}
11   />
12 );
13 
14 // Usage
15 <ErrorMessage name="friends[0].name" />; // => null, 'too short', or 'required'

注意：在 Formik v0.12 / 1.0 中，可能会向 Field 和 FieldArray 添加一个新的 meta 属性，该属性将为您提供相关的元数据，例如 error 和 touch，这将使您不必使用 Formik 或 lodash 的 getIn 或自己检查路径是否已定义。

FieldArray 辅助函数

以下方法可通过渲染属性获得。

push: (obj: any) => void：将值添加到数组的末尾
swap: (indexA: number, indexB: number) => void：交换数组中的两个值
move: (from: number, to: number) => void：将数组中的一个元素移动到另一个索引
insert: (index: number, value: any) => void：在给定索引处将元素插入数组
unshift: (value: any) => number：将元素添加到数组的开头并返回其长度
remove<T>(index: number): T | undefined：删除数组中指定索引处的元素并返回它
pop<T>(): T | undefined：删除并返回数组末尾的值
replace: (index: number, value: any) => void：替换数组中给定索引处的值

FieldArray 渲染方法

有三种方法可以使用 <FieldArray /> 渲染内容

<FieldArray name="..." component>
<FieldArray name="..." render>
<FieldArray name="..." children>

`render: (arrayHelpers: ArrayHelpers) => React.ReactNode`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 export const FriendList = () => (
5   <div>
6     <h1>Friend List</h1>
7     <Formik
8       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
9       onSubmit={...}
10       render={formikProps => (
11         <FieldArray
12           name="friends"
13           render={({ move, swap, push, insert, unshift, pop }) => (
14             <Form>
15               {/*... use these however you want */}
16             </Form>
17           )}
18         />
19     />
20   </div>
21 );

`component: React.ReactNode`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray
13           name="friends"
14           component={MyDynamicForm}
15         />
16       )}
17     />
18   </div>
19 );
20 
21 
22 // In addition to the array helpers, Formik state and helpers
23 // (values, touched, setXXX, etc) are provided through a `form`
24 // prop
25 export const MyDynamicForm = ({
26   move, swap, push, insert, unshift, pop, form
27 }) => (
28  <Form>
29   {/**  whatever you need to do */}
30  </Form>
31 );

`children: func`

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray name="friends">
13           {({ move, swap, push, insert, unshift, pop, form }) => {
14             return (
15               <Form>
16                 {/*... use these however you want */}
17               </Form>
18             );
19           }}
20         </FieldArray>
21       )}
22     />
23   </div>
24 );