React JS：Yup & Formik 错误消息在提交时显示多次

Posted 2023-02-21

【中文标题】React JS：Yup & Formik 错误消息在提交时显示多次

【英文标题】：React JS : Yup & Formik Error Message showing multiple times on Submit

【发布时间】：2021-04-25 16:11:13

【问题描述】：

我正在使用 Yup 和 Formik 作为我的注册表单。

我想根据我使用 YUP 的验证显示一个适当的错误。

以下是我的代码。

import React from 'react';
 import  Formik, Form, Field, ErrorMessage  from 'formik';
 import * as Yup from "yup";
 
 
 function ValidationSchemaExample() 
     
     const SignupSchema = Yup.object().shape(
       name: Yup.string()
         .min(2, 'Too Short!')
         .max(70, 'Too Long!')
         .required('Required'),
     );


    function handleOnSubmit(values)
        console.log("Values : " , values)
    

     return(
        
            <div>
              
              <Formik
                initialValues=
                  name: '',
                  email: '',
                
                validationSchema=SignupSchema
                validateOnChange=false
                 validateOnBlur=false
                onSubmit=handleOnSubmit
              >
                ( errors, touched ) => (
                  <Form id="submit_add_bom_form">
                    <Field name="name"  />
                     errors.name && touched.name ? (
                      <div>errors.name</div>
                    ) : null
                   
                   <ErrorMessage name="name" />

                  </Form>
                )
              </Formik>

              <button form="submit_add_bom_form" type="submit">Submit</button>
            </div>
          
     )
  
 
 

 export default ValidationSchemaExample

它显示了 2 次“必填”文本而不是 1 次。

当我点击提交按钮时，如果有任何错误，它会显示两次而不是一次。

任何帮助都会很棒。

【参考方案1】：

是因为这个部分：

// Error will be shown when there's an error for "name" and if the
// field is touched
errors.name && touched.name ? (<div>errors.name</div>) : null

<ErrorMessage name="name" />

删除该条件或<ErrorMessage /> 组件