我的捕获错误，我似乎无法弄清楚

Question

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

Answer 1

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"));
    }
  };
}