CODEWITHSUNDEEP
javascriptruby-on-railsreactjsaxios
Stefan Hansch
Stefan Hansch

Reputation: 1590

React.js - When authorizing on the site, if the data is incorrect, how can I get a response with a text error?

I send data to API with email and password. API Ruby on Rails with library 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);
  }
}

If email or password are incorrect i get response: 

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

But console.log(resp.errors); display undefined. If i put (resp) => { console.log(resp); } I get in console:

Error: Request failed with status code 401 at createError (createError.js?16d0:16) at settle (settle.js?db52:18) at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

How me get errors in console.log(resp);

Upvotes: 2

Views: 372

Answers (1)

Prakash Sharma
Prakash Sharma

Reputation: 16482

That is because the way you have written resp in argument. You have written resp in bracket like {resp}. It means whenever any object will be passed to this function, resp will be equal to resp property of that object. But as the response only have errors property and no resp property, it shows undefined.

So to work with this you can do either

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

or 

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

EDIT:

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

Upvotes: 3

Related Questions