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

Question

我正在使用 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 次。

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

任何帮助都会很棒。

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