Formik调用validateField验证嵌套字段时抛出未定义错误

问题原因 #

你遇到的报错can't access property "validate", fieldRegistry.current[name] is undefined，核心原因是输入框的name属性未使用嵌套字段的完整路径。Formik的字段注册基于name值，当你调用validateField("socialMedia.facebook")时，Formik会查找注册名为socialMedia.facebook的字段，但你的输入框name只写了facebook，导致字段注册表中找不到对应项，从而抛出错误。

修复方案 #

只需修改两处：

1. 将输入框的name属性改为完整路径socialMedia.facebook
2. 移除手动的onBlur逻辑，直接使用Formik提供的handleBlur（它会自动处理字段触摸状态和验证，无需手动调用setFieldTouched和validateField）

修改后的输入框代码：

<input
  id="socialMedia.facebook"
  name="socialMedia.facebook" // 改为嵌套字段完整路径
  value={values.socialMedia.facebook}
  onChange={handleChange}
  onBlur={handleBlur} // 直接使用Formik内置的handleBlur
  className={
    errors.socialMedia?.facebook && touched.socialMedia?.facebook
      ? "text-input error"
      : "text-input"
  }
/>

额外说明 #

• Formik的handleChange和handleBlur会自动识别点分隔的嵌套字段路径，无需手动拆分处理
• 若确实需要自定义onBlur逻辑，确保调用validateField的参数与输入框的name值完全一致，这样Formik才能找到对应的注册字段

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