使用 React 和 Formik 处理错误答案

【问题标题】：Handling errors with React and Formik使用 React 和 Formik 处理错误
【发布时间】：2021-06-10 09:51:44
【问题描述】：

我正在尝试直接在 Formik 中获取错误并将错误记录在控制台上，但它不起作用。

提交函数

const submitForms = (errors) => {
    console.log("ERRORS ON SUBMIT", errors);
    handleNext();
  };

尝试在 Formik 中捕获错误

<Formik
  initialValues={{ ...initialValues }}
  validationSchema={kycFormSchema}
  onSubmit={({errors}) => submitForms(errors)}
 />

我实际上是在使用 Yup 来验证表单，但我也想捕捉错误并将它们传递到 submitForms 函数中。我错过了什么吗？

提前致谢。

【问题讨论】：

标签： reactjs formik

【解决方案1】：

好像根据官方文档 onSubmit() 的 Formik 库函数不会解构任何错误道具。

您可以在以下链接中找到 onSubmit() 中的可用道具列表：FORMIK | onSubmit( )

这是 onSubmit() 函数的函数定义：

onSubmit：（值：值，formikBag：FormikBag）=> 无效 | 承诺

【讨论】：

【解决方案2】：

如果表单没有通过validationSchema，onSubmit 将不会调用。它仅在没有错误时调用。 onSubmit 只有参数是值，FormikBag。

注意：FormikBag 中不包含错误、触摸、状态和所有事件处理程序。

您可以使用errors 是子组件的道具：https://formik.org/docs/api/formik#component-reactcomponenttypeformikpropsvalues

<Formik component={ContactForm} />;
 
 const ContactForm = ({
   handleSubmit,
   handleChange,
   handleBlur,
   values,
   errors,
 }) => (
   <form onSubmit={handleSubmit}>
     <input
       type="text"
       onChange={handleChange}
       onBlur={handleBlur}
       value={values.name}
       name="name"
     />
     {errors.name && <div>{errors.name}</div>}
     <button type="submit">Submit</button>
   </form>
 );

【讨论】：