Reactjs Yup没有使用Formik，也没有提供任何类型的错误

是的，验证不起作用我也试过像这样从“是的”导入是的，但仍然不起作用。当我创建一个没有是的简单验证函数时，它工作得很好。但当我使用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;

从“React”导入React；
从'formik'导入{useFormik}；
从“是”以是的形式导入*；
常量初始值={
姓名：“，
姓：“，
地址：“
}
const validateSchema=Yup.object({
名称：Yup.string（）.required（'此字段为必填项'），
姓氏：Yup.string（）.required（'此字段为必填项'），
地址：Yup.string（）.required（'此字段为必填项'）
});
const onSubmit=值=>{
log（'FormData->'，值）；
}
函数形式（）{
常数formik=useFormik({
初始值，
提交时，
验证血球
})
返回(
{formik.touch.name&&formik.errors.name？{formik.errors.name}:null}
{formik.toucted.lasname&&formik.errors.lasname？{formik.errors.lasname}:null}
{formik.toucted.address&&formik.errors.address？{formik.errors.address}:null}
提交
)
}
导出默认表单；

此处的有效选项是

validationSchema

而不是

validateSchema

。只需设置正确的一个：

const validationSchema=Yup.object({
// ...
});
乌塞福米克({
// ...
验证模式
})

要使用formik和yup，首先您必须执行npm安装yup和npm安装formik。如果您的纱线用户，请添加纱线formik和纱线添加yup

之后，按照此代码进行操作

import {Formik} from 'formik';
import * as yup from 'yup';
//functional component am using
export const Auth = () => {
const initialFormValue ={
email: '',password: '',};
const SignInSchema = yup.object().shape({
email: yup.string().email('Invalid Email').required('Email is Required'),
password: yup.string().min(5, 'Too Short').required('Password is Required'),
})
<Formik initialValues={initialFormValue} validationSchema={SignInSchema}
 onSubmit={values => console.log(values)}>
 {({values, errors, touched, handleChange, handleBlur,
handleSubmit,isSubmitting,
isValid}) => (
 <>
 <input name='email' type='email' handleChange={handleChange} value=
 {values.email} onBlur={handleBlur} label='Email' />
{errors.email && touched.email ? (<Error>{errors.email}</Error>): null}
<input name='password' type='password' handleChange={handleChange} value=
{values.password} onBlur={handleBlur} label='Password' />
{errors.password && touched.password ? (<Error>{errors.password}</Error>):
null}
<button onClick={handleSubmit} type="submit">Send</button>
 </>
) }
 </Formik>
)}

从'Formik'导入{Formik}；
从“是”以是的形式导入*；
//功能组件am使用
导出常量验证=（）=>{
常量initialFormValue={
电子邮件：“”，密码：“”，}；
const signnschema=yup.object（）.shape({
email:yup.string（）.email（'Invalid email'）。required（'email is required'），
密码：yup.string（）.min（5，“太短”）.required（“密码是必需的”），
})
console.log（值）}>
{（{值、错误、触摸、把手更改、把手模糊、，
handleSubmit，isSubmitting，
isValid}）=>(
{errors.email&&touch.email？（{errors.email}）：null}
{errors.password&&toucted.password？（{errors.password}）：
空}
发送
) }
)}

您不必在外部定义初始值，也可以在formik内部定义初始值

---

我希望这将对您有所帮助。谢谢。

错误来自哪里？网页包构建过程？能否共享完整堆栈跟踪？编译失败/src/Form.js尝试导入错误：“required”不是从“yup”（作为“yup”导入）导出的。我编辑了我的问题，还改进了一些代码，因此出现了此错误，而yup验证无效。您的意思是错误已经消失了？但是验证不起作用？如果是这样的话，你能同时显示你的表单组件吗？我添加了我的表单