Formik：根据条件在下拉框变更时手动设置字段错误

问题原因 #

你在下拉框的onChange里先调用了Formik的handleChange，这个方法会触发Formik内部的字段验证流程——它会重新计算整个表单的错误映射，直接把你手动调用setFieldError设置的内容覆盖掉，所以最终在errors里看不到目标字段的错误。

可行解决方案 #

方案1：把自定义错误逻辑整合到Formik的验证体系中（推荐） #

Formik的核心设计就是通过validate函数或者validationSchema（比如Yup）来统一管理表单错误，这是最规范的做法，能彻底避免手动操作错误状态的冲突。

示例（使用validate函数）：

<Formik
  initialValues={{ /* 你的表单初始值 */ }}
  validate={(values) => {
    const errors = {};
    // 其他字段的常规验证逻辑可以写在这里
    // 加入你的特殊条件判断
    if (parseInt(values.processAction) === 2 && inactiveDefaultSecondApprover) {
      errors.secondApproverId = 'Selected Approver is no longer eligible. Please choose a different Approver to continue.';
    }
    return errors;
  }}
  onSubmit={/* 表单提交逻辑 */}
>
  {({ values, handleChange, errors }) => (
    <Form>
      <Form.Control 
        as="select"
        custom
        id="approverDropDown"
        name="processAction"
        value={values.processAction}
        onChange={handleChange}
      >
        {/* 下拉选项内容 */}
      </Form.Control>
      {/* 渲染错误提示 */}
      {errors.secondApproverId && <div className="text-danger">{errors.secondApproverId}</div>}
    </Form>
  )}
</Formik>

方案2：使用useEffect监听字段变化 #

通过React的useEffect监听processAction的变化，当它切换到目标值时再检查条件设置错误，这样能完全避开handleChange的验证时机：

import { useEffect } from 'react';

// 在Formik的render回调内部：
const { values, setFieldError } = props;

useEffect(() => {
  if (parseInt(values.processAction) === 2) {
    if (inactiveDefaultSecondApprover) {
      setFieldError('secondApproverId', 'Selected Approver is no longer eligible. Please choose a different Approver to continue.');
    } else {
      // 条件不满足时清除对应字段错误
      setFieldError('secondApproverId', '');
    }
  } else {
    // 切换到其他选项时清除对应字段错误
    setFieldError('secondApproverId', '');
  }
}, [values.processAction, inactiveDefaultSecondApprover, setFieldError]);

方案3：临时hack：用setTimeout延迟设置错误（不推荐） #

如果暂时不想改动整体验证逻辑，可以用setTimeout让setFieldError在Formik的handleChange流程完成后再执行：

onChange={e => {
  handleChange(e);
  if (parseInt(e.target.value) === 2) {
    if (inactiveDefaultSecondApprover) {
      setTimeout(() => {
        setFieldError('secondApproverId', 'Selected Approver is no longer eligible. Please choose a different Approver to continue.');
      }, 0);
    }
  }
}}

这种方法属于临时 workaround，可能会带来不可预期的状态同步问题，不建议长期使用。

内容的提问来源于stack exchange，提问作者gene b.