Передача данных об ошибках с Firebase ИЛИ сервера с помощью Formik

Question

У меня есть форма, которую я создал с помощью 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.Я получаю сообщения об ошибках в функции authenticateUser, которая находится в файле index.js.Эти ошибки хранятся в переменной authError, которую я установил с помощью useState.Он работает так, как и предполагалось.

Я хотел бы передать эту переменную или значения ошибок в файл form.js, чтобы при необходимости их можно было отобразить в полях формы.

И это то, что мне трудно понять, как это сделать.Нужно ли создавать контекст для передачи значений?Есть ли более простой и / или более прямой способ поделиться этими ценностями?

Answer 1

Поскольку вы хотите полагаться на ошибки с сервера, вам придется установить их в Formik onSubmit с использованием метода setErrors или setFieldError и установить сообщение об ошибке вашего конкретного имени поля.

Примером этого может достичь что-то подобное ниже:

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