Formik ErrorMessage首次渲染时不显示的问题排查求助

核心原因：Formik的touched状态未触发 #

Formik的ErrorMessage组件默认仅在字段被标记为touched（用户与字段交互并失去焦点）时显示错误信息。首次输入修改内容时，输入框仅触发onKeyDown事件，未触发blur事件，此时字段的touched状态仍为false——即便errors中已有错误文本，ErrorMessage也不会渲染。点击页面其他区域后，输入框失去焦点触发blur，touched变为true，错误信息正常显示；后续输入时，字段已处于touched状态，因此能实时响应校验结果。

可能的其他诱因 #

• 自定义事件覆盖Formik默认处理：你编写的onZipChange如果未调用Formik字段的默认onKeyDown或onChange方法，可能导致Formik状态更新不完整，间接影响touched状态同步。
• Field组件事件传递遗漏：虽代码中使用了{...fieldProps.field}，需确认fieldProps.field是否包含完整的onBlur、onChange等处理函数，若遗漏会导致touched状态无法被正确标记。

解决办法 #

1. 强制ErrorMessage不依赖touched状态（不推荐，不符合常规交互逻辑）：
   修改ErrorMessage组件，添加show属性强制显示错误：

   <ErrorMessage name="zip" show={!!props.formProps.errors.zip} render={msg => <div>{msg}</div>} />
   

2. 手动触发touched状态更新：
   在自定义的onZipChange中调用Formik字段的默认处理方法，或主动标记字段为touched：

   <Field name="zip" validate={/* 你的校验逻辑 */}>
     {fieldProps => (
       <input
         {...fieldProps.field}
         id="zip"
         className="form-control"
         placeholder="zip"
         required={true}
         maxLength={5}
         onKeyDown={(event) => {
           // 先执行Formik默认按键处理
           fieldProps.field.onKeyDown(event);
           // 再执行自定义逻辑
           this.onZipChange(event);
           // 手动标记字段为touched（按需使用）
           fieldProps.form.setFieldTouched('zip', true);
         }}
       />
     )}
   </Field>
   

3. 确保Formik默认事件正常执行：
   检查onZipChange函数是否阻止了事件冒泡或默认行为，保证Formik的onChange、onBlur等事件能正常触发，让touched状态自动同步。

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