reactjs - 是的，没有与 Formik 一起工作，也没有提供任何类型的错误

Question

Yup 验证不起作用我也尝试过像这样 import Yup from 'yup' 但仍然不起作用..，当我创建一个没有 YUP 的简单验证函数时，它工作得很好。但是当我使用 YUP 时，验证不起作用。 添加表单组件

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

const initialValues = {
    name : "",
    surname : "",
    address : ""
}

const validateSchema = Yup.object({
 name: Yup.string().required('This Field is Required'),
 surname: Yup.string().required('This Field is Required'),
 address: Yup.string().required('This Field is Required')
});

const  onSubmit =  values =>{                        
    console.log('FormData->',values);
}

function Form() {
    const formik = useFormik({
        initialValues ,
        onSubmit ,
        validateSchema 
    })
    return (
        <div className="container x col-md-4 col-md-offset-4"  >
         <form onSubmit={formik.handleSubmit} >   
            <div className="form-group">
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} 
                value={formik.values.name}  name="name"  className="name form-control-lg" placeholder="Enter A Name" />
                <small> 
                    {formik.touched.name && formik.errors.name ? <div className="error"> {formik.errors.name}  </div> : null} 
                </small>
            </div>
            <div className="form-group">
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} 
                value={formik.values.surname}  name="surname" className="surname form-control-lg" placeholder="Enter A Surname" />
                <small> { formik.touched.surname && formik.errors.surname ? <div className="error"> {formik.errors.surname}  </div> : null} </small>
            </div>
            <div className="form-group">    
                <input autoComplete="off" onBlur={formik.handleBlur} onChange={formik.handleChange} value={formik.values.address}
                  name="address" className="address form-control-lg" placeholder="Enter A Address" />
                <small> {formik.touched.address  &&  formik.errors.address ? <div className="error"> {formik.errors.address}  </div> : null} </small>
            </div>
            <button className="btn btn-danger" >Submit</button>
        </form>
    </div>
    )
}
export default Form;

Answer 1

此处的有效选项是 validationSchema 而不是 validateSchema。只需设置正确的一个即可:

const validationSchema = Yup.object({
  // ...
});

useFormik({
  // ...
  validationSchema
})