将错误数据从 Firebase 或服务器响应传递给 Formik
Passing Error Data from Firebase OR Server respose to Formik
我有一个使用 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
文件,以便我可以在需要时将它们显示在表单字段中。
这就是我很难弄清楚该怎么做的原因。我是否需要创建上下文来传递值?是否有更简单 and/or 更直接的方式来分享这些价值?
因为你想依赖来自服务器的错误,你必须使用 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
我有一个使用 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
文件,以便我可以在需要时将它们显示在表单字段中。
这就是我很难弄清楚该怎么做的原因。我是否需要创建上下文来传递值?是否有更简单 and/or 更直接的方式来分享这些价值?
因为你想依赖来自服务器的错误,你必须使用 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