Formik 表单里怎么动态添加和删除字段？

惠泽酱~ 提问于 2026-03-09 19:25:21 阅读 54

框架

我用 Formik 做一个可以动态增减的表单项，比如用户能点“+”加一行输入邮箱，也能删掉某一行。但我不太清楚怎么在 initialValues 里处理这种动态结构，试过用数组，但 setFieldValue 更新的时候老是出问题。

比如我现在这样初始化：

initialValues={{ emails: [''] }}

然后想加一行就 push 一个空字符串，但发现 UI 不更新，或者删掉中间一项后索引错乱。有没有标准做法？

Formik

我来解答赞 5 收藏

反馈

1 条解答

卫华 Lv1

动态表单在Formik里确实容易踩坑，关键是要用immutable的方式更新数组。别用push，用concat。删除也别用splice，用filter。这里给你个完整方案：

初始化这样写：

initialValues={{

  emails: [''] // 初始至少一个空项

}}

添加新行的函数：

const handleAddEmail = () => {

  setFieldValue('emails', [...values.emails, ''])

}

删除特定行的函数（传index）：

const handleRemoveEmail = (index) => {

  setFieldValue('emails', values.emails.filter((_, i) => i !== index))

}

渲染表单部分这样写：

{values.emails.map((email, index) => (

  <div key={index}>

    <Field name={emails.${index}} />

    <button type="button" onClick={() => handleRemoveEmail(index)}>

      删除

    </button>

  </div>

))}

<button type="button" onClick={handleAddEmail}>

  添加邮箱

</button>

要点：
1. 永远用展开运算符或concat创建新数组
2. 删除时用filter保留不需要删除的项
3. Field的name用点语法emails.${index}来绑定数组项

我之前也被这个坑过，总想着用mutable方法直接改数组，结果各种UI不更新。复制过去试试，保证好使。

2026-03-09 20:01