Reactjs reduxForm未提交，给出错误未处理拒绝（SubmissionError）：提交验证失败

我正在使用，我想提交表单并显示服务器端验证错误，但它给出以下错误：

服务器响应：

以下是登录表单组件：

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/reducers/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
});

---

这里有两件事你做得不对。也许我遗漏了其他问题，但我确信这两个问题：

在dispatch中绑定动作创建者，以便能够在组件抽屉中分派动作。这样做（仅更改部分，我正在编辑）：

您必须使用redux thunk作为中间件。它用于在react中使用redux时处理异步调度。您的api调用是异步的，因此在进行axios post调用后无法直接返回响应。您需要在那里返回一个函数，如下所示：

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));
        }
      };
    };

并删除组件中的承诺处理。因为您的所有数据现在都可以在redux中使用，您可以通过mapStateToProps获得这些数据

---

注意：我可能没有注意到花括号。请检查是否欢迎反馈

收到错误，请检查问题，我在下面添加了错误正如我所说，您需要删除.then和.catch块，因为它现在仅在action creator中处理。如果需要任何登录api数据，应通过mapStatetoProps获取。现在，loginUser的返回不是一个承诺，而是一个从未承诺过的承诺，即使在您的旧实现中

submitLoginForm=（值）=>{return this.props.loginUser（values）；}

这将导致错误

TypeError:dispatch不是一个函数

我现在该怎么办？我陷入了这个错误：（您是否使用redux thunk作为中间件？

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

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));
        }
      };
    };