Formik默认复选框设置初始值后仍为空的问题排查

核心问题 #

你遇到的Formik多选复选框初始值不生效、提交后值为空的问题，根源在于以下几个错误：

• checked属性设置错误：直接把department._id赋值给checked，这是字符串/ID类型而非布尔值，Formik需要判断当前选项是否在选中数组中。
• 重复的checked属性：代码里重复写了两次checked={department?._id}，属于无效代码，会被浏览器忽略。
• 复选框ID不唯一：所有复选框的id都设为department，会导致label关联混乱，不符合HTML规范。
• （可能的疏漏）如果Formik组件传入的是initialValue而非initialValues，会和Formik要求的props名不匹配，导致初始值无法被正确读取。

修复步骤 #

1. 修正初始值命名与默认值 #

确保初始值变量名是initialValues（Formik的标准props名），并给数组设置默认空数组避免undefined：

const initialValues = {
  department: departments?.map((x: any) => x._id) || [],
  designation: designations?.map((x: any) => x._id) || [],
};

2. 修正复选框的checked判断与ID #

使用Formik的上下文获取当前选中值，判断当前部门ID是否在选中数组中，同时给每个复选框设置唯一ID：

方式一：使用useFormikContext

import { useFormikContext } from 'formik';

// 在组件内部获取Formik上下文
const { values } = useFormikContext();

// 渲染复选框部分
<Grid
  container
  spacing={{ xs: 2, md: 3 }}
  columns={{ xs: 4, sm: 8, md: 12 }}
>
  {departments?.map((department: any, i) => (
    <Grid item xs={2} sm={4} md={4} key={department._id}>
      <Item>
        <label
          style={{ wordBreak: "break-word" }}
          htmlFor={`department-${department._id}`} // 关联唯一ID
        >
          <Field
            as={Checkbox}
            id={`department-${department._id}`} // 唯一ID
            name="department"
            value={department._id}
            style={{ display: "table" }}
            checked={values.department.includes(department._id)} // 正确判断选中状态
          />
          {department?.Name}
        </label>
      </Item>
    </Grid>
  ))}
</Grid>

方式二：使用Field的Render Prop

如果不想用上下文，可以直接通过Field的render函数获取字段状态：

<Grid
  container
  spacing={{ xs: 2, md: 3 }}
  columns={{ xs: 4, sm: 8, md: 12 }}
>
  {departments?.map((department: any, i) => (
    <Grid item xs={2} sm={4} md={4} key={department._id}>
      <Item>
        <label
          style={{ wordBreak: "break-word" }}
          htmlFor={`department-${department._id}`}
        >
          <Field name="department">
            {({ field }) => (
              <Checkbox
                id={`department-${department._id}`}
                {...field}
                value={department._id}
                checked={field.value.includes(department._id)}
                style={{ display: "table" }}
              />
            )}
          </Field>
          {department?.Name}
        </label>
      </Item>
    </Grid>
  ))}
</Grid>

3. 确认Formik组件的props #

确保你在渲染Formik组件时正确传入了初始值：

<Formik
  initialValues={initialValues} // 这里必须是initialValues
  onSubmit={handleSubmit}
>
  {/* 你的表单内容 */}
</Formik>

修复原理 #

Formik处理多选数组类型的字段时，会自动维护一个数组：

• 每个复选框的name对应数组字段名
• 选中时会将value加入数组，取消选中时移除
• checked属性必须是布尔值，通过判断当前value是否在数组中来控制选中状态

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