React Formik ErrorMessage 错误总是显示

问题描述

render={({ errors,touched }) => (
        <Form onSubmit={submitBook}>
         <FormGroup>
          <label htmlFor="Name">Full Name</label>
            <Field
              value={book.bookingCustomerName}
              onBlur={() => book.setFieldTouched('Name')}
              onChange={e => setBook({...book,bookingCustomerName: e.target.value})}
              className="form-control"
              name="Name"
              placeholder="Jay Sankar Bhat"
              type="text"
            />
            <ErrorMessage
              name="Name"
              component="div"
              className="field-error text-danger"
            />
         </FormGroup>

这是 Formik 组件。即使将值放入字段中，也会呈现错误消息。为什么会这样？ Form Image

完整代码如下：

    let packageType = useParams();
    packageType = packageType.package;
    let history = useHistory();
    let [message,setMessage] = useState({
      msg: '',color: 'danger'
    });
    let [pack,setPack] = useState(0);
    let [price,setPrice] = useState(0);
    let [isApplied,setIsApplied] = useState(false);
    let [isSubmitted,setIsSubmitted] = useState(false);
    let [book,setBook] = useState({
        bookingPackageType: packageType,bookingCustomerName: '',customerMobile: '',bookingDate: '',bookingSlot:'',address: '',comment: '',promoCode: ''
    });

使用 Yup 的预订模式。这用作验证架构：

const BookingSchema = Yup.object().shape({
    bDate: Yup.string()
      .required("inspection Date required"),Name: Yup.string()
      .min(2,"Must be longer than 2 characters")
      .max(50,"Nice try,nobody has a first name that long")
      .required("Name required"),mobile: Yup.string()
      .min(10,"Enter 10 Digits Mobile Number")
      .max(10,"Enter 10 Digits Mobile Number")
      .required("Mobile Number required")
  })

解决方法

这是你需要做的：

{book.bookingCustomerName===""?
<ErrorMessage
              name="Name"
              component="div"
              className="field-error text-danger"
            />
:null}

只需添加一个检查条件，如果您的值为空，则显示错误消息，否则不显示。