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

问题描述

我的注册表单使用 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 次。

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

任何帮助都会很棒。

解决方法

是因为这部分：

// 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 /> 组件