Formik中map函数渲染的checkbox选中后不显示勾选标记

问题原因 #

核心问题是未在Formik的initialValues中显式声明复选框组对应字段的初始值类型：

• Formik在表单首次挂载时，会根据当前渲染的控件自动推导未手动声明字段的初始值类型。如果将多个同name的checkbox直接写在JSX中，首次渲染就能扫描到全量复选框控件，会自动将对应字段初始化为数组类型，选中状态判断逻辑正常，因此界面可以正常显示勾选标记。
• 当使用map动态渲染复选框时，如果students数据是异步加载、或首次渲染时students为空数组，Formik初次挂载阶段找不到对应name的checkbox控件，不会提前初始化数组类型的字段。后续点击复选框时，Formik内部状态和控件选中态的绑定会出现不同步：提交时Formik会全量收集所有控件值，因此提交的数据可以正常填充，但控件本身的checked属性没有被正确同步，就会出现点击后不显示勾选的现象。

少数场景下该问题也会由值类型不匹配导致：比如student.id为数字类型，但表单状态中存储的选中值为字符串类型，Formik用严格相等===判断选中状态时会匹配失败，不过这类问题通常会伴随提交值异常的现象。

解决方案 #

• 显式声明初始值（优先推荐）
  在Formik的initialValues配置中，手动给复选框组对应的字段设置空数组初始值，不要依赖Formik的自动类型推导：

  <Formik
    initialValues={{
      checked: [], // 和复选框的name属性保持一致
      // 其余表单字段...
    }}
    onSubmit={(values) => {
      // 提交逻辑
      console.log(values)
    }}
  >
    {/* 表单其他内容 */}
    {students.map(student => 
      <Field 
        type="checkbox" 
        name="checked" 
        value={student.id} 
        key={student.id}
      />
    )}
  </Formik>
  

• 自定义复选框组件兜底
  如果显式设置初始值后仍存在渲染不同步问题，可以借助useField钩子自定义复选框组件，手动绑定状态，避免自动绑定的异常：

  import { useField } from 'formik';
  
  // 自定义复选框组件
  const GroupCheckbox = ({ name, value, label }) => {
    const [field] = useField({ name, type: 'checkbox', value });
    return (
      <label>
        <input type="checkbox" {...field} />
        {label}
      </label>
    )
  }
  
  // 循环渲染时使用自定义组件
  students.map(student => 
    <GroupCheckbox
      name="checked"
      value={student.id}
      key={student.id}
      label={student.name}
    />
  )
  

• 值类型校验
  确保传入Field的value类型和预期存储类型一致，比如student.id为数字类型时不要额外转为字符串，避免严格相等判断失败导致选中态不匹配。

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