ReactJS - Formik |Как обработать неверный запрос к серверу в форме отправки

Question

Я использую React и Formik для обработки ошибок в форме.Во время тестирования я обнаружил, что когда сервер отправляет запрос BAD, я получаю Console Error, говоря, что:

:5000/api/user:1 POST http://localhost:5000/api/user 400 (Bad Request)
index.jsx:101 Uncaught TypeError: Cannot read property 'username' of undefined

Это код, к которому он относится:

 <form onSubmit={handleSubmit}>
          <div className="pb-2">
            <label htmlFor="username">
              Username <Asterisk />
            </label>
            <Field
              validate={this.debounceUsernameValidation}
              className={classNames('form-control', {
                'is-invalid': errors.username && touched.username
              })}
              placeholder="Username (Required)"
              autoComplete="false"
              name="username"
              type="text"
            />
            {errors.username && touched.username ? (
              <div className="text-danger">{errors.username}</div>
            ) : null}
            {/* <ErrorMessage name={field.username} component={FormErrorMessage} /> */} // Error Here on field.username
          </div>

Я пытался использовать ErrorMessage из formik, но затем я получаю сообщение об ошибке: cannot read property username of undefined.

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

ПРОБЛЕМА: Мне нужна помощь по обработке ошибок такого рода: (40x, 50x),Это логика компонента, которую я использую с formik.

Я обрабатываю ошибку через withFormik HOC.Это означает, что я хочу на CREATE и на DELETE, то же самое поведение.

import React, { Component } from 'react';
import * as Yup from 'yup';
import PropTypes from 'prop-types';
import { withFormik } from 'formik';

import { createUser, updateUser } from '../../config/service';
import { listGroups } from '../../../userGroups/config/service';

const EnchancedCreateUserFormWrapper = WrappedComponent => {
  class AddEditUser extends Component {
    static propTypes = {
      // eslint-disable-next-line react/forbid-prop-types
      errors: PropTypes.object,
      setErrors: PropTypes.func,
      // eslint-disable-next-line react/forbid-prop-types
      touched: PropTypes.object,
      setTouched: PropTypes.func,
      isSubmitting: PropTypes.bool,
      handleChange: PropTypes.func,
      handleSubmit: PropTypes.func,
      setStatus: PropTypes.func
    };

    static defaultProps = {
      inEditMode: true
    };

    state = {
      isRetrievingData: false
    };

    componentDidMount() {
      const { setStatus } = this.props;
      this.setState({
        isRetrievingData: true
      });
      Promise.resolve([listGroups()])
        .then(values => values.map(res => res.data))
        .then(([groups]) => {
          this.setState({
            isRetrievingData: false,
            groups
          });
        })
        .catch(({ errors, message } = { message: 'Could not retrieve data from server.' }) => {
          this.setState({
            isRetrievingData: false
          });
          this.onFetchError(message);
          setStatus(errors);
        });
    }

    onFetchError = (message = null) => {
      this.setState({
        isLoading: false,
        data: {},
        errorMessage: message
      });
    };

    handleCancel = () => {
      const { onCancel } = this.props;
      onCancel();
    };

    render() {
      return (
        <WrappedComponent
          {...this.props}
          {...this.state}
          onHandleSubmit={this.handleSubmit}
          onHandleCancel={this.handleCancel}
        />
      );
    }
  }

  const EnchancedCreateUserForm = withFormik({
    mapPropsToValues: ({
      user = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        group: ''
      }
    }) => ({ ...user }),

    validationSchema,

    handleSubmit: (values, { props, setSubmitting, setStatus, setErrors }) => {
      const { inEditMode, errors } = props;

      if (inEditMode) {
        const saveUser = values.id ? updateUser : createUser;

        return saveUser(values)
          .then(() => {
            setSubmitting(false);
            setStatus('');
            props.onSave(values);
          })
          .catch(({ response: { data } }) => {
            setSubmitting(false);
            setErrors(errors);
            setStatus(data);
          });
      }

      setSubmitting(false);

      return false;
    },

    displayName: 'AddEditUser'
  })(AddEditUser);

  return EnchancedCreateUserForm;
};

export default EnchancedCreateUserFormWrapper;

Я пытаюсь setStatus, от formik для отображения ошибок на стороне сервера, но unitl теперь этоне работает.