将错误数据从 Firebase 或服务器响应传递给 Formik

Posted 2023-02-22

【中文标题】将错误数据从 Firebase 或服务器响应传递给 Formik

【英文标题】：Passing Error Data from Firebase OR Server respose to Formik

【发布时间】：2020-01-20 00:26:39

【问题描述】：

我有一个使用 Formik 创建的表单，并且我已经同步到了 firebase。我将代码拆分为几个文件，其中两个如下：

// form.js
import React from 'react'

import  Button  from 'UI'
import  Form, Email, TextInput as Text, Password  from 'UI'

export const FormFields = ( errors, isSubmitting, isValid ) => 
  return (
    <Form>
      <h3>Sign Up</h3>
      <Text name="name" />
      <Email name="email" />
      <Password name="password" />
      <Password name="confirmPassword" />
      <Button disabled=!isValid || isSubmitting type="submit">
        Submit
      </Button>
    </Form>
  )


// index.js
import React,  useState  from 'react'
import  Formik  from 'formik'
import * as Yup from 'yup'

import  firebase  from 'Classes'

import  FormFields as Form  from './form'
import  validationSchema  from './validation'
import  initialValues  from './values'

export const SignUpForm = () => 
  const [authError, setAuthError] = useState(null)
  console.log('authError: ', authError)

  async function authenticateUser(values) 
    const  name, email, password  = values
    try 
      await firebase.register(name, email, password)
     catch (error) 
      console.log('Authentication error: ', error)
      setAuthError(error.message)
    
  

  return (
    <>
      <h1>Form</h1>
      <Formik
        render=props => 
          console.log('props: ', props)
          return <Form ...props />
        
        initialValues=initialValues
        validationSchema=validationSchema
        onSubmit=async (
          values,
           authError, setError, setErrors, setSubmitting, resetForm 
        ) => 
          setSubmitting(true)
          authenticateUser(values)
          setSubmitting(false)
          resetForm()
        
      />
    </>
  )

我已经对其进行了测试，并且（几乎）一切正常。

我的问题与显示来自 Firebase 的错误消息有关。我收到关于位于index.js 文件中的authenticateUser 函数的任何错误消息。这些错误存储在我使用useState 设置的authError 变量中。它按预期工作。

我想做的是将该变量或那些错误值传递给form.js 文件，以便我可以在需要时将它们显示在表单字段中。

这就是我很难弄清楚该怎么做的事情。我是否需要创建一个上下文来传递值？有没有更简单和/或更直接的方式来分享这些价值观？

【参考方案1】：

由于您想依赖来自服务器的错误，您必须使用setErrors 或setFieldError 方法将其设置在Formik 的onSubmit 中，并设置特定字段名的错误消息。

类似下面的东西可能会达到这个结果：

export const SignUpForm = () => 
  // const [authError, setAuthError] = useState(null)
  // console.log('authError: ', authError)

  async function authenticateUser(values, setFieldError) 
    const  name, email, password  = values
    try 
      await firebase.register(name, email, password)
     catch (error) 
      console.log('Authentication error: ', error)
      // setAuthError(error.message)
      setFieldError("myErrorFieldName", error.message) // <-------------------
    
  

  return (
    <>
      <h1>Form</h1>
      <Formik
        render=props => 
          console.log('props: ', props)
          return <Form ...props />
        
        initialValues=initialValues
        validationSchema=validationSchema
        onSubmit=async (
          values,
           authError, setError, setErrors, setSubmitting, resetForm, setFieldError 
        ) => 
          setSubmitting(true)
          authenticateUser(values, setFieldError) // <-------------------
          setSubmitting(false)
          resetForm()
        
      />
    </>
  )

在您的 form.js 中，您必须根据错误对象字段存在值进行编码：

export const FormFields = ( errors, isSubmitting, isValid ) => 
  return (
    <Form>
      <h3>Sign Up</h3>
      <Text name="name" />
      <Email name="email" />
      <Password name="password" />
      <Password name="confirmPassword" />
      <Button disabled=!isValid || isSubmitting type="submit">
        Submit
      </Button>
       errors.myErrorFieldName &&  <p>errors.myErrorFieldName</p>  // <----------
    </Form>
  )

您也可以使用<ErrorMessage name="myErrorFieldName"/> 组件来显示消息：https://jaredpalmer.com/formik/docs/api/errormessage#docsNav

【讨论】：

-- 谢谢。做到了。唯一的例外是ErrorMessage 组件。这对我不起作用（即，什么都没有出现）。但其他一切都有效并解决了我的问题。再次感谢。

很高兴它成功了。 ErrorMessage 组件来自 formik，您必须使用要设置错误的确切字段名称，无论哪种方式适合您，都应该足够好，两者都具有相同的目的。