Каковы наилучшие процессы обработки ошибок для формы ответа без сохранения состояния как на клиенте, так и на сервере?

Question

Я добавил весь компонент, так как я новичок в публикации и решил, что больше информации было лучше, чем недостаточно. В основном там, где она стоит, форма «не имеет состояния», за исключением использования состояния, которое содержит сама форма. Я пытаюсь справиться с ошибками, которые исходят с двух сторон. Ошибки на стороне клиента, такие как «Пароли не совпадают», «Недействительный адрес электронной почты» и т. Д. Те, для которых я пытаюсь использовать валидатор lib для. Второй угол - ошибки на стороне сервера. В настоящее время ошибки будут поступать из моего ответа на мутацию. I 'Я надеюсь, что смогу найти плавный способ обработки этих ошибок без состояния, и в настоящее время я попытаюсь использовать функцию handleChange для клиента. Если это плохой подход или слишком много данных, поделитесь своими советами / мудростью. Кроме того, любые советы илиВ коде и в будущих публикациях приветствуется лучшая практика. Спасибо (очень плохо знакомы с Full Stack Development)

Импорт

import React from 'react'
import Container from '@material-ui/core/Container'
import { makeStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import Paper from '@material-ui/core/Paper'
import gql from 'graphql-tag'
import { useMutation } from '@apollo/react-hooks'
import FormHelperText from '@material-ui/core/FormHelperText'
import validate from 'validate.js'
import FormControl from '@material-ui/core/FormControl'

Материал интерфейса для стилей

const useStyles = makeStyles({
  form: {
    width: '100%',
    marginTop: 15,
  },
  paper: {
    marginTop: 15,
  },
  register: {
    margin: 15,
    color: 'white',
    backgroundColor: '#414849',
    width: '95%'
  },
  email: {
    margin: 15,
    width: '95%'
  },
  username: {
    margin: 15,
    width: '95%'
  },
  password: {
    margin: 15,
    width: '95%'
  },
  confirmPassword : {
    margin: 15,
    width: '95%'
  }
})

Компонент формы

// need to access error elements, update errors from validator & from server
// and also reset errors either on resubmit, or handleChange
function Form (props){

  function handleChange(event, value){
    const name = event.target.name
    console.log(event.target.value)
  }

  async function onSubmit(props){
   var form = document.querySelector('form')
   var values =  validate.collectFormValues(form)
   console.log(form.email)
   console.log(form.querySelectorAll('p')[0])
    try{
     const results = await props.client
      .mutate({
        mutation: gql`
         mutation register
          ($userName: String!, $email: String!, $password: String!){
            register(userName: $userName, email: $email, password: $password){
              id
              userName
            }
          }`,
        variables: {
          userName: form.userName.value,
          email: form.email.value,
          password: form.password.value,
        }
      })
     console.log(results)
    }
    catch (err) {
      console.log(err)
    }
  }

  const classes = useStyles()
  return(
   <Container component="main" maxWidth="sm">
    <Paper className={classes.paper}>
      <form
        name='form'
        className={classes.form}>
        <TextField
          className={classes.email}
          name='email'
          variant='outlined'
          type='text'
          label='Email'
          InputLabelProps={{
            shrink: true,
          }}
          onChange={(event) => {
            handleChange(event)
          }}/>
        <FormHelperText
          name='emailError'
        >
          Future Email Error
        </FormHelperText>
        <TextField
          className={classes.username}
          name='userName'
          variant='outlined'
          type='text'
          label='Username'
          InputLabelProps={{
            shrink: true,
          }}
          onChange={(event) => {
            handleChange(event)
          }}/>
        <TextField
          className={classes.password}
          name='password'
          variant='outlined'
          type='text'
          label='Password'
          InputLabelProps={{
            shrink: true,
          }}
          onChange={(event) => {
            handleChange(event)
          }}/>
        <TextField
          className={classes.confirmPassword}
          name='confirmPassword'
          variant='outlined'
          type='text'
          label='Confirm Password'
          InputLabelProps={{
           shrink: true,
          }}
          onChange={(event) => {
            handleChange(event)
          }}/>
        <Button
          className={classes.register}
          variant='contained'
          onClick={()=> {
            onSubmit(props)
          }}>
          REGISTER
        </Button>
      </form>
    </Paper>
   </Container>
  )
}

export default Form

Answer 1

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

внутри функции onSubmit.

var clientError;
   var form = document.querySelector('form')
   var values =  validate.collectFormValues(form)
   var errors = await validate(values, constraints)

   if(errors == undefined){
     clientError = false
   } else clientError = true

   resetErrors(form)
   handleErrors(form, errors || {})

   if(clientError == false){
     try{
     const results = await props.client
      .mutate({
        mutation: gql`
         mutation register
          ($userName: String!, $email: String!, $password: String!){
            register(userName: $userName, email: $email, password: $password){
              id
              userName
            }
          }`,
        variables: {
          userName: form.userName.value,
          email: form.email.value,
          password: form.password.value,
        }
      })
     console.log(results)
     props.props.history.push('/login')

    }
    catch (err) {
      handleGraphqlErrors(form, err)
    }
   }
  }

Фактические функции для обработки ошибок

//handle return errors from mutation
  function handleGraphqlErrors(form, err){
    const graphqlErrors = err.toString().slice(22)
    console.log(graphqlErrors)
    if(graphqlErrors == 'Username is already taken'){
      document.getElementById('userNameError').innerHTML = graphqlErrors
    }
    if(graphqlErrors == 'Email is already in use'){
      document.getElementById('emailError').innerHTML = graphqlErrors
    }
  }

  //map errors to proper input fields
  function handleErrors(form, errors){
    Object.keys(errors).map((key, index) => {
      console.log(errors[key])
      document.getElementById(`${key}Error`).innerHTML = errors[key]
    })
  }

  //reset error input fields to blank
  function resetErrors(form){
    var errorInputs = form.querySelectorAll('p')
    Object.keys(errorInputs).map(key => {
      errorInputs[key].innerHTML = ''
    })
  }