使用useFormik时如何修改数组类型的表单初始值

更新Formik中的数组字段核心原则是不要直接修改原数组引用，必须传入新的数组引用触发状态更新，常用实现方式有以下几种：

1. 使用内置setFieldValue方法手动更新 #

这是最通用的方式，适用于所有数组操作场景，调用时传入字段路径和全新的数组值即可：

• 追加数组项

// 向functionalBreakdown字段追加新元素
const addItem = (newItem) => {
  formik.setFieldValue('functionalBreakdown', [
    ...formik.values.functionalBreakdown,
    newItem
  ])
}

• 删除指定索引项

// 删除functionalBreakdown中指定索引的元素
const removeItem = (targetIndex) => {
  formik.setFieldValue(
    'functionalBreakdown',
    formik.values.functionalBreakdown.filter((_, idx) => idx !== targetIndex)
  )
}

• 修改指定索引项

// 更新functionalBreakdown中指定索引的元素值
const updateItem = (targetIndex, updatedValue) => {
  const newList = formik.values.functionalBreakdown.map((item, idx) => {
    return idx === targetIndex ? updatedValue : item
  })
  formik.setFieldValue('functionalBreakdown', newList)
}

注意：禁止直接对formik.values.xxx数组调用push/splice/pop等会修改原数组的方法，这类操作不会触发Formik的状态更新和校验逻辑。

2. 表单控件直接绑定（适用于多选场景） #

如果是checkbox类多选控件，直接通过getFieldProps绑定数组字段即可，Formik会自动处理值的增删逻辑，无需手动写更新代码：

<input
  type="checkbox"
  value="architecture"
  {...formik.getFieldProps('discipline')}
/>
<span>建筑专业</span>
<input
  type="checkbox"
  value="structure"
  {...formik.getFieldProps('discipline')}
/>
<span>结构专业</span>

3. 使用FieldArray组件处理复杂列表 #

如果是可动态增删的列表类场景，推荐用Formik内置的FieldArray组件，它封装了常用的数组操作方法，不需要手动处理不可变更新：

import { FieldArray } from 'formik'

<FieldArray name="spatialBreakdown">
  {({ push, remove, replace }) => (
    <div>
      {formik.values.spatialBreakdown.map((item, idx) => (
        <div key={idx} style={{ marginBottom: 8 }}>
          <input
            value={item}
            onChange={(e) => replace(idx, e.target.value)}
          />
          <button onClick={() => remove(idx)} style={{ marginLeft: 8 }}>
            删除
          </button>
        </div>
      ))}
      <button onClick={() => push('')}>新增拆分项</button>
    </div>
  )}
</FieldArray>

FieldArray还提供了insert、unshift、swap、move等常用方法，覆盖绝大多数数组操作需求。

内容的提问来源于stack exchange，提问作者Sandip Rout