React Native使用Formik报_useFormikContext.errors未定义错误如何解决

架构老林

2026-9-29

报错原因

这个报错的核心原因是useFormikContext()没有获取到有效的Formik上下文：

useFormikContext是Formik提供的上下文Hook，只能在被Formik组件包裹的后代组件中调用，如果你把自定义的FormImagePicker组件放在了Formik组件的外部使用，Hook会返回undefined，解构errors属性时就会触发该类型错误。
小概率触发原因：Formik版本过低、依赖安装异常，导致上下文API无法正常工作。

修复方案

按优先级排查修复即可：

调整FormImagePicker的使用位置，确保它放在Formik组件的内部，示例正确用法如下：

import { Formik, Form } from 'formik';
import FormImagePicker from './FormImagePicker';

function SubmitForm() {
  return (
    <Formik
      // 注意：必须给你绑定的name字段设置初始值，图片列表对应初始值为空数组
      initialValues={{
        yourImageFieldName: []
      }}
      onSubmit={(values) => {
        // 提交逻辑
      }}
    >
      <Form>
        {/* FormImagePicker 必须放在Formik组件内部才能拿到上下文 */}
        <FormImagePicker name="yourImageFieldName" />
        <button type="submit">提交表单</button>
      </Form>
    </Formik>
  )
}

补充防御性代码避免偶发异常，在FormImagePicker里解构上下文时增加兜底默认值：

// 原来的写法
const { errors, setFieldValue, touched, values } = useFormikContext();
// 修改为兜底写法
const { errors, setFieldValue, touched, values } = useFormikContext() || {};