使用 Formik 和 Yup 进行验证时，React Select 不显示错误

如何解决使用 Formik 和 Yup 进行验证时，React Select 不显示错误

大家好，我在我的项目中使用 react-select 以及 Formik 和 Yup 进行验证 即使我在控制台中看到错误对象中的错误，但我无法在前端显示该错误

这是下面的代码

export default function FormSection({
  onContinueButton,allFormValues,holders,}) {
  console.log(holders,"hol12");

  const formik = useFormik({
    initialValues: {
      firstBirthDate: "",firstSmoker: "",secondBirthDate: "",secondSmoker: "",},onSubmit: (values,{ setSubmitting }) => {
      console.log(formik.errors);
      console.log(formik.values,"valqwqrwe");

      setSubmitting(false);
      allFormValues(formik.values);
      console.log(values);
    },validationSchema: validationSchemaSectionTwo,});
  const options = [
    { value: "Não",label: "Não" },{ value: "Sim",label: "Sim" },];

  const handleChangeFirstHolder = (selectedOption) => {
    // this.setState({ selectedOption });
    console.log(`Option selected:`,selectedOption);
    formik.setFieldValue("firstSmoker",selectedOption);
  };

  console.log(formik.errors,"********");

  console.log("touchhhhhhhhhhhhhh",formik.touched.firstSmoker);
  return (
    <div className="secondSection">
      <form onSubmit={formik.handleSubmit}>
        <React.Fragment>
          <p className="tab-text">É fumador?</p>
          <Select
            value={formik.values.firstSmoker}
            name="firstSmoker"
            onChange={handleChangeFirstHolder}
            options={options}
            className="select-smoker"
            onBlur={formik.handleBlur}
          />
          {formik.errors.firstSmoker && formik.touched.firstSmoker && (
            <div className="formik-errors">{formik.errors.firstSmoker}</div>
          )}
        </React.Fragment>

        <br />
      </form>
    </div>
  );
}

因此，当我 console.log(formik.erros) 看到我想向用户显示的错误时，但是 console.log(formik.touched.firstSmoker) 始终未定义，即使我单击 Select 标签然后没有选择选项单击外部它，我一点击触摸值就应该是真的，但它没有发生

谢谢！

解决方法

您可以明确告诉 Formik 输入已被触摸。最简单的方法是在某处放置一个 setTouched() - 例如内部处理程序 onBlur()

 <Select
   value={formik.values.firstSmoker}
   name="firstSmoker"
   onChange={handleChangeFirstHolder}
   options={options}
   className="select-smoker"
   onBlur={()=> {
       formik.setTouched({ firstSmoker: true });
   }}
/>