修改Formik表单后验证提示不显示，请求排查问题

你手动用useState接管了Field组件的value和onChange，这直接脱离了Formik的内部状态管理机制。Formik的validate函数基于自身维护的表单状态运行，而你现在把字段值存在独立的state里，Formik无法感知字段变化，也就没法将验证错误绑定到对应字段上，导致ErrorMessage组件找不到firstName的错误信息，自然不会显示。

不要用外部useState控制Formik字段，改用Formik的初始值配置实现URL参数填充需求：

1. 在Formik初始化时传入从URL获取的初始值：

const searchParams = new URLSearchParams(document.location.search);

<Formik
  initialValues={{
    firstName: searchParams.get("firstName") || "",
    // 其他表单字段...
  }}
  // 补充你的onSubmit等其他配置
>
  {({ handleSubmit }) => (
    <Form onSubmit={handleSubmit}>
      {/* 表单内容 */}
    </Form>
  )}
</Formik>

2. 还原Field组件写法，移除手动添加的value和onChange：

<div className="col-md-6 col-sm-12">
  <div className="form-group">
    <Field
      type="text"
      id="firstName"
      name="firstName"
      className="form-control"
      placeholder="First Name"
      validate={ValidateName}
    />

    <ErrorMessage name="firstName">
      {msg => <div style={errorMsg}>{msg}</div>}
    </ErrorMessage>
  </div>
</div>

如果确实需要同步字段值到外部状态，不要用自己的useState，改用Formik提供的useFormikContext钩子：

import { useFormikContext } from 'formik';

// 在Formik内部组件中使用
const { setFieldValue, values } = useFormikContext();

const handleFirstNameChange = (e) => {
  // 用Formik的方法更新字段值
  setFieldValue('firstName', e.target.value);
  // 若需同步到外部状态，在这里添加对应逻辑
};

// Field组件写法
<Field
  type="text"
  id="firstName"
  name="firstName"
  className="form-control"
  placeholder="First Name"
  onChange={handleFirstNameChange}
  validate={ValidateName}
/>

这样既满足URL参数填充初始值的需求，又能让Formik正常管理表单状态与验证逻辑，ErrorMessage即可正确显示验证错误。

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