CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
zicxor
zicxor

Reputation: 57

React - Redux | Unhandled Rejection (TypeError): Cannot read property 'data' of undefined

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({}));
};

Upvotes: 2

Views: 2306

Answers (1)

Ivan Sanchez
Ivan Sanchez

Reputation: 664

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

Upvotes: 2

Related Questions