0

I am fairly new to react but I think I'm starting to get the hang of it, and just as I thought that I ran into an issue that I cant seem to figure out. when logging in to the app I get this.

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
(anonymous function)
src/actions/auth.js:105
  102 |       dispatch(push("/app"));
  103 |     })
  104 |     .catch((err) => {
> 105 |       dispatch(authError(err.response.data));
      | ^  106 |     });
  107 | } else {
  108 |   dispatch(authError("Something was wrong. Try again"));

the code in question is below.

export function authError(payload) {
  return {
    type: AUTH_FAILURE,
    payload,
  };
}

export function loginUser(creds) {
  return (dispatch) => {
    if (creds.email.length > 0 && creds.password.length > 0) {
      axios
        .post("/auth/login", creds)
        .then((res) => {
          const payload = res.data;
          dispatch(receiveToken(payload));
          dispatch(doInit());
          dispatch(push("/app"));
        })
        .catch((err) => {
          dispatch(authError(err.response.data));
        });
    } else {
      dispatch(authError("Something was wrong. Try again"));
    }
  };
}

the thing is the server responds with "POST /api/auth/login HTTP/1.1" 200 286

so at this point, it looks like the server is getting the right creds, I don't know what to do. I'm putting in the right credentials that worked before and regardless if an error did occur it's not catching it correctly. Any help would be greatly appreciated. Thank you

Ebolasudan
  • 111
  • 2
  • 8
  • 6
    Your error is telling you that "err" does not have a "response" property. Why don't you try console.logging the "err" and seeing what it does have? It might be an important clue. – tmdesigned Jul 25 '20 at 02:08
  • https://stackoverflow.com/a/51768316/11362183 Take a look at this answer – Yash Shah Jul 25 '20 at 07:38
  • i followed the link and tried it, still nothing. i at least got the else statement to throw up something was wrong instead of just breaking but I till don't know what is causing the error. autherror() is being triggered but the server is responding with 200 code. – Ebolasudan Jul 25 '20 at 15:42

1 Answers1

0

console.log(err) instead of dispatch(authError(err.response.data)) first in your catch block. Then inspect in chrome and check what is the structure of err in Console.

    export function authError(payload) {
  return {
    type: AUTH_FAILURE,
    payload,
  };
}

export function loginUser(creds) {
  return (dispatch) => {
    if (creds.email.length > 0 && creds.password.length > 0) {
      axios
        .post("/auth/login", creds)
        .then((res) => {
          const payload = res.data;
          dispatch(receiveToken(payload));
          dispatch(doInit());
          dispatch(push("/app"));
        })
        .catch((err) => {
          console.log(err);
          //dispatch(authError(err.response.data));
        });
    } else {
      dispatch(authError("Something was wrong. Try again"));
    }
  };
}
Dhiraj Baruah
  • 192
  • 1
  • 8
  • tried that and no error shows up in the console log. its weird, cause I'm getting a 200 status code on the server, postman logs in fine. but the error is getting triggered. – Ebolasudan Jul 25 '20 at 15:45
  • 1
    this issue happen when your response have an error , for example when the response is correct but in the then response you do something that throw an error , axios then catch that error , even if the response from the server was success. https://github.com/axios/axios/issues/1178 – Dhiraj Baruah Jul 26 '20 at 13:23
  • that makes a lot of sense, ill take a look at it later and see what is it that may be messing it up. at this point it's just another issue in a long line of em lol. – Ebolasudan Jul 26 '20 at 19:58