React.js - 在网站上授权时，如果数据不正确，我该如何获得文本错误的响应？

Posted 2023-03-11

【中文标题】React.js - 在网站上授权时，如果数据不正确，我该如何获得文本错误的响应？

【英文标题】：React.js - When authorizing on the site, if the data is incorrect, how can I get a response with a text error?

【发布时间】：2017-12-31 18:07:49

【问题描述】：

我使用电子邮件和密码向 API 发送数据。 API Ruby on Rails 与库 devise-token-auth

---

signinform.js

.................................................. .......

onSubmit(e)
e.preventDefault();
this.setState(errors: , isLoading: true);
this.props.userSignInRequest(this.state).then(
  () => console.log('ok!'),
  (resp) =>  console.log(resp.errors); 
);

..................................................... .......

actions/signInActions.js

import axios from 'axios';

export function userSignInRequest(userData)
  return dispatch => 
    return axios.post('/auth/sign_in', userData);
  

如果电子邮件或密码不正确，我会收到回复：

"errors":["Invalid login credentials. Please try again."]

但是 console.log(resp.errors);显示未定义。如果我输入(resp) => console.log(resp); 我会进入控制台：

错误：在 XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

我如何在 console.log(resp) 中出现错误；

【参考方案1】：

那是因为你在参数中写resp 的方式。你已经在括号中写了resp，比如resp。这意味着无论何时将任何对象传递给此函数，resp 将等于该对象的resp 属性。但由于响应只有errors 属性，没有resp 属性，所以显示未定义。

因此，您可以这样做

onSubmit(e)
e.preventDefault();
this.setState(errors: , isLoading: true);
this.props.userSignInRequest(this.state).then(
  () => console.log('ok!'),
  (resp) =>  console.log(resp.errors); 
);

或

onSubmit(e)
e.preventDefault();
this.setState(errors: , isLoading: true);
this.props.userSignInRequest(this.state).then(
  () => console.log('ok!'),
  (errors) =>  console.log(errors); 
);

编辑：

this.props.userSignInRequest(this.state).then(() =>
    console.log('ok!')
).catch((resp) => 
    console.log(resp.response.data);
));

【讨论】：

作为对这个答案的补充，这里有一个关于 javascript 解构的链接 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 解构是当你在 javascript 对象周围放置大括号时发生的事情。

hm....我更改为(errors) => console.log(errors); ，再次显示未定义，但在 chrome 控制台中响应：` "errors":["无效的登录凭据。请重试。"]`

使用 userSignInRequest 函数更新您的问题。

api返回的http状态码是什么？？

状态码：401 未授权