reactjs – React Redux Axios：POST请求没有从redux状态接收凭

我的问题是,为什么当我提交表单时,它不会发送任何凭据？

但是,当我在credChange上控制记录动作和有效负载时,它似乎是正确的.我不是在某个地方设置州吗？
此外,axios没有捕获400 Bad Request错误.

这是我的代码：

AuthActions.js

export const credChange = ({ prop,value }) => {
  return {
    type: CRED_CHANGE,payload: { prop,value },};
};
export const logoutUser = () => {
  return (dispatch) => {
    dispatch({ type: LOGOUT_USER });
  };
};
const loginSuccess = (dispatch,response) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,payload: response.data.token,});
};
const loginError = (dispatch,error) => {
  dispatch({
    type: LOGIN_USER_ERROR,payload: error.response.data,});
};
export const loginUser = ({ empNum,password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });
    axios({
      method: 'post',url: 'http://127.0.0.1:8000/profiles_api/jwt/authTK/',data: {
        emp_number: empNum,password,},})
      .then(response => loginSuccess(dispatch,response))
      .catch(error => loginError(dispatch,error));
  };
};

AuthReducer.js

const INITIAL_STATE = {
  empNum: '',password: '',empNumErr: null,passwordErr: null,authTK: null,loading: false,};

export default (state = INITIAL_STATE,action) => {
  switch (action.type) {
    case CRED_CHANGE:
      return { ...state,[action.payload.prop]: action.payload.value };
    case LOGIN_USER:
      return {
        ...state,...INITIAL_STATE,loading: true,};
    case LOGOUT_USER:
      return {
        ...state,INITIAL_STATE,};
    case LOGIN_USER_SUCCESS:
      return {
        ...state,authTK: action.payload,};
    case LOGIN_USER_ERROR:
      return {
        ...state,empNumErr: action.payload.emp_number,passwordErr: action.payload.password,};
    default:
      return state;
  }
};

LoginForm.js

import React,{ Component } from 'react';
import { connect } from 'react-redux';

import {
  credChange,loginUser,logoutUser,} from '../Actions';

class LoginForm extends Component {
  constructor() {
    super();
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.renderEmpNumErr = this.renderEmpNumErr.bind(this);
    this.empNumChange = this.empNumChange.bind(this);
    this.passwordChange = this.passwordChange.bind(this);
  }
  onFormSubmit() {
    const { empNum,password } = this.props;
    this.props.loginUser({ empNum,password });
  }
  empNumChange(text) {
    this.props.credChange({ prop: 'empNum',value: text.target.value });
  }
  passwordChange(text) {
    this.props.credChange({ prop: 'password',value: text.target.value });
  }
  renderEmpNumErr() {
    if (this.props.empNumErr) {
      return (
        <p>
          {this.props.empNumErr}
        </p>
      );
    }
    return null;
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <label htmlFor="numberLabel">Employee Number</label>
          <input
            id="numberLabel"
            type="password"
            value={this.props.empNum}
            onChange={this.empNumChange}
          />
          <label htmlFor="passLabel">Password</label>
          <input
            id="passLabel"
            type="password"
            value={this.props.password}
            onChange={this.passwordChange}
          />
          <button type="submit">Login</button>
        </form>
        {this.renderEmpNumErr()}
      </div>
    );
  }
}

const mapStateToProps = ({ counter }) => {
  const {
    empNum,loading,empNumErr,passwordErr,authTK,} = counter;
  return {
    empNum,};
};

export default connect(mapStateToProps,{ credChange,logoutUser })(LoginForm);

提交带有凭据的表单后

控制台说：

POST XHR http://127.0.0.1:8000/profiles_api/jwt/authTK/ [HTTP / 1.0 400 Bad Request 5ms]

POST请求原始数据为空,因此未发送凭据.

{“emp_number”：[“此字段为必填项.”],“密码”：[“此字段为必填项.”]}

编辑
如果我能提供任何其他信息,请说明,但我认为这应该足够了.