Formik集成Ant Design Select时错误提示不显示问题求助

我制作了一个可复用的Formik表单，尝试用Ant Design Select替代Formik原生Select，但集成后错误提示功能失效。控制台中Ant Select的数值变更正常，但错误文本始终不显示。

页面组件代码 #

import React from "react";
import { Formik } from "formik";
import { Form } from 'antd'
import * as Yup from "yup";
import FormikController from "../components/Forms/FormikController";
const city = [
  { key: "option 1", value: "option1" },
  { key: "option 2", value: "option2" },
  { key: "option 3", value: "option3" },
  { key: "option 4", value: "option4" },
 ];
const Contact = () => {
  const initialValues = {
    whoYouAre: "",
    email: "",
    message: "",
  };
  const validationSchema = Yup.object({
    whoYouAre :Yup.string().required(),
    email :Yup.string().required()
  });
  return (
      <Container className="contact">
            <h5 className="mb-4">Contact</h5>
            <Formik
              initialValues={initialValues}
              validationSchema={validationSchema}
              // onSubmit={handleAddData}
              validateOnMount
            >
              {(formik) => (
                <Form className="w-100">
                    <FormikController
                      control="selectsearch"
                      options={city}
                      formik={formik}
                      name="whoYouAre"
                      label="Please Tell Us Who You Are"
                    />
                    <FormikController
                      control="input"
                      type="text"
                      name="email"
                      label="Email"
                    />
                    <FormikController
                     control="textarea"
                      name="message"
                      rows="8"
                      label="Message"
                    />
                    <div>
                      <Button variant="primary" type="submit">
                        Send
                      </Button>
                    </div>
                </Form>
              )}
            </Formik>
      </Container>
  );
};
export default Contact;

可复用Ant Design Select组件代码 #

import React from "react";
import { Form,Select } from "antd";
import { ErrorMessage } from "formik";
import TextError from "./TextError";
const { Option } = Select;
const SearchSel = (props) => {
const { label, name, options ,formik, ...rest } = props;
console.log(formik);
return (
  <Form.Item className="mb-3">
    <Select
      showSearch
      size="large"
      optionFilterProp="children"
      placeholder={label}
      name={name}
      onChange={(value) => formik.setFieldValue("whoYouAre", value)}
    >
      {options.map((option) => {
        return (
          <Option key={option.value} value={option.value}>
            {option.key}
          </Option>
        );
      })}
    </Select>
    <ErrorMessage name={name} component={TextError} />
  </Form.Item>
);
};
export default SearchSel;

• 硬编码字段名：onChange回调里写死了"whoYouAre"，导致复用组件时无法正确更新对应字段，Formik也无法触发该字段的验证状态更新。
• 未绑定Formik字段值：Select组件未与Formik的字段值双向绑定，Formik无法正确追踪字段状态。
• 未标记字段触达状态：缺少onBlur事件触发字段触达状态，Formik不会主动显示未触达字段的验证错误。

import React from "react";
import { Form, Select } from "antd";
import { ErrorMessage } from "formik";
import TextError from "./TextError";
const { Option } = Select;

const SearchSel = (props) => {
  const { label, name, options, formik, ...rest } = props;
  const fieldValue = formik.values[name];
  const isTouched = formik.touched[name];

  return (
    <Form.Item className="mb-3">
      <Select
        showSearch
        size="large"
        optionFilterProp="children"
        placeholder={label}
        name={name}
        // 绑定Formik字段值，实现双向同步
        value={fieldValue}
        // 动态更新对应字段，移除硬编码
        onChange={(value) => formik.setFieldValue(name, value)}
        // 标记字段为已触达，触发验证错误显示
        onBlur={() => formik.setFieldTouched(name, true)}
        {...rest}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value}>
            {option.key}
          </Option>
        ))}
      </Select>
      <ErrorMessage name={name} component={TextError} />
    </Form.Item>
  );
};

export default SearchSel;

1. 动态字段名：用props.name替代硬编码的字段名，确保组件复用性，同时让Formik正确关联对应字段的验证状态。
2. 字段值绑定：通过value={formik.values[name]}让Select的值与Formik状态同步，保证状态一致性。
3. 触达状态触发：onBlur事件标记字段为已触达，配合Formik的验证规则，在用户交互后显示错误提示。

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