<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 的慣例，迭代物件陣列，作為 <FieldArray /> 中 <Field /> 或 <input /> 元素的 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 和您的自定義驗證函式應始終將錯誤訊息輸出為字串，因此當您要顯示巢狀錯誤時，需要檢查它是陣列還是字串。

因此...要顯示 '必須有朋友' 和 '至少 3 個朋友'（我們範例的陣列驗證限制）...

不良

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