React Formik Error Message 错误总是显示

Question

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: ''
    });

使用是的预订模式。这用作 ValidationSchema:

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")
  })

Answer 1

这是你需要做的：

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

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

React Formik Error Message 错误总是显示

React Formik ErrorMessage error always shwoing

reactjs

yup

react-component

formik