React Redux Axios：POST 请求未收到来自 redux 状态的凭据

关键词：

【中文标题】React Redux Axios：POST 请求未收到来自 redux 状态的凭据【英文标题】：React Redux Axios: POST Request not receiving credentials from redux state 【发布时间】：2018-04-19 04:39:52 【问题描述】：

我一直在对我的项目进行身份验证。我有一个提供 JWT 令牌的 REST api 后端。我的前端堆栈是 ReactJS、Redux、Axios 和 Redux Thunk。

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

但是当我在 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,
        ...INITIAL_STATE,
        authTK: action.payload,
      ;
    case LOGIN_USER_ERROR:
      return 
        ...state,
        ...INITIAL_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,
    password,
    loading,
    empNumErr,
    passwordErr,
    authTK,
   = counter;
  return 
    empNum,
    password,
    loading,
    empNumErr,
    passwordErr,
    authTK,
  ;
;

export default connect(mapStateToProps,  credChange, loginUser, logoutUser )(LoginForm);

提交带有凭据的表单后

控制台说：

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

POST 请求原始数据为空白，因此未发送任何凭据。

"emp_number":["此字段为必填项。"],"password":["此字段为必填项。"]

编辑 如果我可以提供任何其他信息，请说出来，但我认为这应该足够了。

【问题讨论】：

【参考方案1】：

看起来 empNum 和 password 没有在该状态下设置。这是因为 credChange 返回的 action 对象没有被调度，所以 reducer 永远不会被调用：

// dispatch calls the reducer which updates the state
dispatch(actionCreator())

// returns an action object, doesn't call reducer
actionCreator() 

您可以通过调用绑定动作创建者来自动调度动作：

// calls the reducer, updates the state
const boundActionCreator = () => dispatch(actionCreator())

// call boundActionCreator in your component
boundActionCreator()

mapDispatchToProps 可用于定义绑定的动作创建者（作为道具传递）：

const mapDispatchToProps = (dispatch) => 

  return 
      credChange: ( prop, value ) => dispatch(credChange(prop, value),
      loginUser: ( empNum, password ) => dispatch(loginUser(empNum, password),
      logoutUser: () => dispatch(logoutUser(),
  


export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

这应该解决状态更新问题，允许从状态（empNumber、密码等）读取的道具也更新。

【讨论】：

loginUser 正在被调度。 onFormSubmit() 调度它。这是经过验证的，因为 axios 请求会通过。问题是凭据为空。我只需要弄清楚为什么在调用 axios 请求时，应该在 empNum 和 password 中的值是空白的。这显然不是预期的行为。有任何想法吗？ 编辑 也许我错了，我仍然遗漏了一些东西。如果是这样，你能详细说明吗？ @GraysonLangford 您的回答将我引向了正确的方向。我最终在组件级别状态上更新了 empNum 和密码，然后 onSubmit 发送了操作以使用凭据登录。这是有效的，但它是最好的选择吗？我问是因为我在后端构建的身份验证系统使用 JWT，并且我打算使登录超时和刷新功能。也许将凭据保持在 redux 状态是刷新登录等的方法。@GraysonLangford 此线程可能会回答您的问题：github.com/reactjs/redux/issues/1287 如果其他地方不需要 empNum 和密码，最好将它们保持在本地组件状态。如果稍后您发现其他组件需要访问它们（并且作为 props 传递是不可能的或需要向下传递太多级别），总是可以返回到全局 redux 状态。 你很有帮助@Grayson Langford！谢谢你。你指给我的线程回答了我的问题。我只需要花时间了解 react 和 redux 协同工作的方式。感谢您的回答，我将检查您的答案是否正确，希望这将有助于其他人。干杯。

取消路由更改请求 (React/Redux/Axios)

】取消路由更改请求(React/Redux/Axios)【英文标题】：Cancelrequestsonroutechange(React/Redux/Axios)【发布时间】：2017-12-1120:12:18【问题描述】：是否有方便的方法可以使用axios、redux-thunk、redux取消任何路由更改的所有发送请求？我知道axios... 查看详情

axios.post 调用后 Redux 更新状态太慢

...用react、redux应用一个简单的登录功能。通过使用axiospost请求发送到django服务器（用户名、密码）但问题出在调用它的组件上。例如组件A。所以场景是这样的：用户输入用户名和密码并点击提交ha 查看详情

REACT 如何使用 Redux 和 Axios（使用 promise 中间件）发出 AJAX 请求？

】REACT如何使用Redux和Axios（使用promise中间件）发出AJAX请求？【英文标题】：REACTHowtomakeAJAXrequestswithReduxandAxios(withpromisemiddleware)?【发布时间】：2017-11-3020:24:57【问题描述】：我有这个动作创建者：exportfunctiongetLevelsMap()constrequest=a... 查看详情

每个 axios 请求在 react-redux 应用程序中触发两次？

】每个axios请求在react-redux应用程序中触发两次？【英文标题】：Everyaxiosrequestfiringtwiceinreact-reduxapp?【发布时间】：2020-05-0408:42:55【问题描述】：有很多类似的问题，但对我没有任何帮助。每个Axios请求都会在我的reactredux节点应... 查看详情

React + axios + redux 拦截器

...序，白色jwt身份验证。因此，我需要拦截对服务器的每个请求并使用令牌设置标头。问题是我必须在哪里设置此标头或实施拦截器。（另外，我需要范围内的redux存储，以从存储中获取令牌）。我的想法-在Index组件中实现它 查看详情

如何使用 React Redux 发出 post 请求？

】如何使用ReactRedux发出post请求？【英文标题】：Howtomakeapostrequestusingreactredux?【发布时间】：2019-04-0515:37:16【问题描述】：我创建了一个包含电子邮件、名字、姓氏详细信息的表单。现在我想向localhost:5000/api/users发出POST请求，... 查看详情

如何使用 react-redux 存储令牌并在多个 axios 请求中使用它？

】如何使用react-redux存储令牌并在多个axios请求中使用它？【英文标题】：Howtousereact-reduxtostoreatokenanduseitonmultipleaxiosrequest?【发布时间】：2018-04-2809:36:13【问题描述】：我正在使用reactnative构建一个应用程序，该应用程序需要我使... 查看详情

在 react/redux 中的 post 请求后渲染视图

】在react/redux中的post请求后渲染视图【英文标题】：renderviewafterapostrequestinreact/redux【发布时间】：2017-06-2322:07:14【问题描述】：我有post方法助手，我在其中对基本上正在运行的服务器进行其余调用，但调用后视图/容器不会重新... 查看详情

axios 不会将 post 数据发送到后端

...我是新手，我的问题是我要向我的节点后端发出一个发布请求。使用react-redux和axios。问题是我的后端甚至没有达到请求。并且在浏览器以太网中的网络选项卡上没有任何操作我尝试了很多其他答案，但都不起作用此代码在我的re... 查看详情

使用 react/axios 的空 POST 请求

】使用react/axios的空POST请求【英文标题】：emptyPOSTrequestwithreact/axios【发布时间】：2018-06-2305:59:49【问题描述】：我是node.js的新手并做出反应。我已经构建了一个后端api来为具有三个字段的Products模型公开CRUD端点：Title、Description... 查看详情

无法从 axios POST 请求中获得响应（React）

】无法从axiosPOST请求中获得响应（React）【英文标题】：Can\'tgetresponsefromaxiosPOSTrequest(React)【发布时间】：2022-01-0803:07:18【问题描述】：我正在尝试从这个axios请求中获取响应头：constres=awaitaxios.post(process.env.REACT_APP_URL_API+"/login",us... 查看详情

axios.post 返回 400 React Native 的错误请求

】axios.post返回400ReactNative的错误请求【英文标题】：axios.postreturnsbadrequestof400ReactNative【发布时间】：2020-03-3005:38:54【问题描述】：我从API获取令牌，但不幸的是我的API返回400错误请求。我已经通过Postman检查了我的api，它在那里... 查看详情

如何在客户端处理 CORS 错误（React-Redux-Axios）

...t-redux应用程序中，我通过axios向我的后端服务api发出服务请求，我在这里很好，因为我可以完全控制我的后端服务，所以我添加了“Access-Control-Allow- 查看详情

如何使用 react redux 正确调度 axios 删除

...时间】：2022-01-2400:30:30【问题描述】：我正在尝试在删除请求后刷新状态。正确的id正在被删除，但它根本没有刷新状态，因为操作负载是空的。以下是我当前的代码。actions\\index.js...functiondeleteCustomerSucceed 查看详情

如何使用自定义 React 钩子通过 Axios 发出 POST 或 DELETE 请求

】如何使用自定义React钩子通过Axios发出POST或DELETE请求【英文标题】：HowtouseacustomReacthooktomakeaPOSTorDELETErequestwithAxios【发布时间】：2022-01-2208:50:19【问题描述】：我正在尝试在React中创建一个通用的useAxios钩子。我希望能够将此钩... 查看详情

React - Axios 调用发出过多请求

】React-Axios调用发出过多请求【英文标题】：React-Axioscallmaketoomanyrequests【发布时间】：2020-01-2701:32:15【问题描述】：我正在通过制作游戏项目来学习React和Redux。我想通过API获取数据（属性），但它会导致太多请求。猜猜可以将ax... 查看详情

React js 和 axios POST 请求发送空数组

】Reactjs和axiosPOST请求发送空数组【英文标题】：ReactjsandaxiosPOSTrequestsendsemptyarray【发布时间】：2019-02-1220:38:46【问题描述】：当我尝试使用axios发布到其他服务器时它首先发送OPTIONS请求然后POST。当我检查网络连接时它发送带有... 查看详情

在 react-native 中发送请求标头/授权 axios.post

】在react-native中发送请求标头/授权axios.post【英文标题】：Sendingrequestheaders/authorizationaxios.postinreact-native【发布时间】：2020-08-1615:50:26【问题描述】：我在通过我的申请授权时遇到困难。我的jwt令牌exportconstupdate_profile=(about,birthday... 查看详情