reduxForm не отправляет, выдает ошибку Unhandled Rejection (SubmissionError): Ошибка проверки при отправке

Question

Я использую reduxForm 7.4.2 , я хочу отправить форму и отобразить ошибку проверки на стороне сервера, но она дает мне ошибку ниже:

Ответ сервера:

Вот LoginForm компонент:

import React,{Component} from 'react'
import InputGroup from '../ui/InputGroup';
import { bindActionCreators } from "redux"
import { Field , reduxForm,SubmissionError} from 'redux-form';
import {faEnvelope,faLock} from '@fortawesome/free-solid-svg-icons'
import { connect } from 'react-redux';
import { loginUser,loginUserFailure,loginUserSuccess } from '../../actions/authActions';


class LoginForm extends Component {
    constructor(){
        super();
        this.submitLoginForm=this.submitLoginForm.bind(this);
    }

    submitLoginForm=values=>{         
       this.props.loginUser(values);      
    }

    render() {
    const { handleSubmit, submitting} = this.props;
    return(
        <form onSubmit={handleSubmit(this.submitLoginForm)}>
                    <Field component={InputGroup} type="email" placeholder="Email" id="email" name="email" icon={faEnvelope}></Field>
                    <Field component={InputGroup} type="password" placeholder="Password" id="password" name="password" icon={faLock}></Field>
                    <button type="submit" className="btn btn-success btn-block" disabled={submitting}>Login</button>
        </form>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
    user:state.user
})


 const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({
    loginUser,
    loginUserFailure,
    loginUserSuccess,
    }, dispatch)
  }

LoginForm = connect(mapStateToProps,mapDispatchToProps)(LoginForm);
LoginForm = reduxForm({ form: 'loginForm'})(LoginForm);
export default LoginForm;

src / actions / authActions :

import axios from 'axios';
import { SubmissionError} from 'redux-form';


export const LOGIN_USER = 'LOGIN_USER';
export const LOGIN_USER_SUCCESS = 'LOGIN_USER_SUCCESS';
export const LOGIN_USER_FAILURE = 'LOGIN_USER_FAILURE';

export const loginUser =userdata=>{
   return dispatch => {
    try {
      const request = axios.post("/api/auth/login", userdata);
      request
        .then(res => {
          dispatch(loginUserSuccess(request));
        })
        .catch(e => {
          //dispatch(loginUserFailure(e));
          dispatch(loginUserFailure(e.response.data));
          throw new SubmissionError(e.response.data);
        });
    } catch (e) {
      dispatch(loginUserFailure(e));
    }
  }; 
 }

export const loginUserSuccess=user=>{
    return {
        type:LOGIN_USER_SUCCESS,
        payload:user
    }
}

export const loginUserFailure=error=>{
    return {
        type:LOGIN_USER_FAILURE,
        payload:error
    }
}

src / redurs / authReducer.js:

import { LOGIN_USER,LOGIN_USER_SUCCESS,LOGIN_USER_FAILURE} from './../actions/authActions';

const INITIAL_STATE = {isAuthenticated: false,user: null, status:null, error:null, loading: false};

  export default function(state = INITIAL_STATE, action) {
    let error;
    switch (action.type) {
        case LOGIN_USER:
        return { ...state, isAuthenticated: false,user: null, status:'login', error:null, loading: true}; 

        case LOGIN_USER_SUCCESS:
        return { ...state, isAuthenticated: true,user: action.payload.user, status:'authenticated', error:null, loading: false}; 

        case LOGIN_USER_FAILURE:
        error = action.payload.data || {message: action.payload.message};     
        return { ...state,isAuthenticated: false, user:null, status:'login', error:error, loading: false};

  default:
        return state;
    }
}; 

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);
export default store;

корневой редуктор

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form'
import authReducer from './authReducer';

export default combineReducers({
    form: formReducer,
    auth:authReducer
});

Answer 1

Здесь есть две вещи, которые вы делаете неправильно. Может быть, я упускаю другие проблемы, но я уверен в этих двух:

Свяжите своих создателей действий в рассылку, чтобы иметь возможность отправлять действие в немом компоненте Drawer. Сделайте что-то вроде этого (только измененная часть, я редактирую):

import { bindActionCreators } from "redux"
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    loginUser,
    loginUserFailure,
    loginUserSuccess,
  }, dispatch)
}

Вы должны использовать redux-thunk в качестве промежуточного программного обеспечения. Он используется для обработки асинхронных отправлений при использовании избыточности с реагированием. Ваш вызов API является асинхронным, поэтому вы не можете напрямую вернуть ответ после посылки Axios после вызова. вам нужно вернуть функцию туда, вот так:

export const loginUser = userdata => {
      return dispatch => {
        try {
          const request = axios.post("/api/auth/login", userdata);
          return request
            .then(res => {
              dispatch(loginUserSuccess(request));
            })
            .catch(e => {
              dispatch(loginUserFailure(e));
            });
        } catch (e) {
          dispatch(loginUserFailure(e));
        }
      };
    };

И удалите обработку обещаний в своем немом компоненте. потому что все ваши данные теперь доступны в избыточном количестве, которое вы можете получить через mapStateToProps.

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