2

Everything is fine until login > dispatch > payload: err.response.data. Then gives an error: Unhandled Rejection (TypeError): Cannot read property 'data' of undefined I've checked many sources but I can't find what is wrong. In register, payload: err.response.data works perfectly. But In login, gives this error

import axios from "axios";
import setAuthToken from "../utils/setAuthToken";
import jwt_decode from "jwt-decode";

import { GET_ERRORS, SET_CURRENT_USER } from "./types";

// Register User
export const registerUser = (userData, history) => dispatch => {
  axios
    .post("/api/users/register", userData)
    .then(res => history.push("/login"))
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

// Login - Get User Token
export const loginUser = userData => dispatch => {
  axios
    .post("/api/users/login", userData)
    .then(res => {
      // Save to localStorage
      const { token } = res.data;
      // Set token to ls
      localStorage.setItem("jwtToken", token);
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

// Set logged in user
export const setCurrentUser = decoded => {
  return {
    type: SET_CURRENT_USER,
    payload: decoded
  };
};

// Log user out
export const logoutUser = () => dispatch => {
  // Remove token from localStorage
  localStorage.removeItem("jwtToken");
  // Remove auth header for future requests
  setAuthToken(false);
  // Set current user to {} which will set isAuthenticated to false
  dispatch(setCurrentUser({}));
};
2
  • Have you tried putting a console.log before the dispatch and have a look into err? Commented Oct 20, 2018 at 19:57
  • Hi @MarcelT. , i have tried console.log. It says undefined. But it can't go to the right way: "/dashboard". Commented Oct 21, 2018 at 8:08

1 Answer 1

2

It looks fine, however I would try this:

  1. Whenever you server launch the error, make sure you emit this object:

    response.json({response: {data: "Error..."}})

  2. Otherwise check the undefined object in loginUser function:

    payload: ((err||{}).response||{}).data || 'Error unexpected'

    That will check your nested object before you have undefined values.

    Solution picked from Oliver Steele Blog

Sign up to request clarification or add additional context in comments.

4 Comments

Hi, object is undefined. I tried your 2. code. And development server does'nt start. Could there be a problem with React?
Hi, I think you might have another issue in react and this is why you sever doesn't start. Post here the error if you have it!
Whoah! I fix it. I retry your 2. code. says: Warning: Failed prop type: Invalid prop errors of type string supplied to Login, expected object. in Login (created by Connect(Login)) in Connect(Login) (created by Route) in Route (at App.js:28) in div (at App.js:23) in Router (created by BrowserRouter) in BrowserRouter (at App.js:22) in Provider (at App.js:21) in App (at src/index.js:7)
Congrats! But I didn't know you expected an object instead of a text as 'Error unexpected'. That's ok :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.