使用Formik表单与Yup校验：操作后错误信息未更新问题

看起来你遇到了Formik和自定义AutoSuggest组件配合时，校验错误信息不及时更新的问题——我之前做类似组件时也踩过这些坑，给你几个针对性的排查和解决方向：

1. 补全onSuggestionSelected逻辑，触发Formik状态更新 #

从你贴的代码片段看，onSuggestionSelected的代码没写完，这很可能是核心问题。当用户选择下拉建议时，你需要手动告诉Formik字段值发生了变化，并且标记字段为已触碰，这样Yup才会重新校验并更新错误信息：

onSuggestionSelected={(event, { suggestion }) => {
  // 用Formik的setFieldValue更新字段值
  setFieldValue('name', this.getSuggestionValue(suggestion));
  // 标记字段为已触碰，让错误信息可以正常显示
  setFieldTouched('name', true);
  // 可选：如果自动校验没触发，手动强制校验这个字段
  formik.validateField('name');
}}

2. 统一数据源，避免双值绑定冲突 #

你的组件同时传了inputPropsValue={this.props.newVal}和value={this.props.value}，这可能导致Formik的状态和组件外部状态不一致，Formik没法准确追踪值的变化。应该统一使用Formik管理的字段值：

// 假设你的InputAutoSuggest在Formik的render回调里，formik是回调参数
inputPropsValue={formik.values.name}
value={formik.values.name}

这样所有值的变更都通过Formik处理，校验逻辑才能准确触发。

3. 校验Formik和Yup的基础配置是否正确 #

• 确保Formik的initialValues里包含name字段，比如：

  <Formik
    initialValues={{ name: '' }}
    validationSchema={yourValidationSchema}
    // ...其他配置
  >
  

• 检查Yup的校验规则是否正确绑定到name字段，比如：

  const yourValidationSchema = Yup.object().shape({
    name: Yup.string().required('名称不能为空')
    // 其他自定义校验规则
  });
  

4. 确认onBlur事件正常触发 #

有些自定义AutoSuggest组件的onBlur事件可能不会自动冒泡或者触发时机不对，导致Formik没把字段标记为touched（Formik默认只显示已触碰字段的错误）。除了依赖组件自带的onBlur，你可以在选择建议时手动调用setFieldTouched，就像第一点里写的那样。

如果以上步骤都试了还是有问题，可以检查一下InputAutoSuggest组件内部是否有自己的状态管理，有没有覆盖Formik传入的值——自定义组件很容易犯这个错，一定要确保数据单向流向Formik。

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