Cannot read property 'data' of undefined when user successfully register - reactjs

Question

I keep getting an error everytime a user signs up successfully,
Unhandled Rejection (TypeError): Cannot read property 'data' of
undefined
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
why is it executing this catch method if their is no error when a user signs up successfully ?
console.log(err.response) shows when a user is registering with the same username or email.
What could i be doing wrong ?
authActions.js
export const registerUser = (userData) => dispatch => {
Axios
.post('/users/register', userData)
.then( res => {
const token = res.data.token;
console.log(token);
// pass the token in session
sessionStorage.setItem("jwtToken", token);
// set the auth token
setAuthToken(token);
// decode the auth token
const decoded = jwt_decode(token);
// pass the decoded token
dispatch(setCurrentUser(decoded))
this.props.history.push("/dashboard")
}).catch( (err) => {
console.log(err.response)
dispatch({
type: GET_ERRORS,
payload: err.response.data
})
})
};
reducer
import {SET_CURRENT_USER } from '../actions/types';
import isEmpty from '../actions/utils/isEmpty';
const initialState = {
isAuthenticated: false
}
export default (state = initialState, action) => {
switch (action.type) {
case SET_CURRENT_USER:
return{
...state,
isAuthenticated: !isEmpty(action.payload),
user:action.payload
}
default:
return state;
}
}
console.log(res)
{
"data": {
"message": "user created",
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NDEsImlhdCI6MTU1OTI2ODcxNX0.t7xK5VVdOmj2BbExBmOdUrZHwYuyEJgjvUTQq1Mw5qY",
"auth": true
},
"status": 200,
"statusText": "OK",
"headers": {
"content-type": "application/json; charset=utf-8",
"content-length": "165"
},
"config": {
"transformRequest": {},
"transformResponse": {},
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"headers": {
"Accept": "application/json",
"Content-Type": "application/json"
},
"method": "post",
"baseURL": "http://localhost:3000",
"withCredentials": true,
"url": "http://localhost:3000/users/register",
"data": "{\"username\":\"billyssss999\",\"email\":\"j0hnnnysssraddddddin#yahoo.com\",\"password\":\"janeddmdddba\"}"
},
"request": {}

Answer 1

So it seems to be working after i remove this
this.props.history.push("/dashboard")
and redirects to the dashboard already by this existing code.
Signup
....
componentDidMount() {
// console.log(this.props.auth);
if (this.props.auth.isAuthenticated) {
this.props.history.push("/dashboard");
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.auth.isAuthenticated) {
this.props.history.push("/dashboard");
}
if (nextProps.errors) {
this.setState({ errors: nextProps.errors });
}
}
handleChange = (e) => {
e.preventDefault();
const {formData} = this.state;
this.setState({
formData: {
...formData,
[e.target.name]: e.target.value
}
});
}
handleSubmit = (e) => {
e.preventDefault();
const {formData} = this.state;
const {username, email, password, passwordConf} = formData;
this.setState({
username: this.state.username,
password: this.state.password,
passwordConf: this.state.passwordConf,
email: this.state.email
});
const creds = {
username,
email,
password
}
console.log(creds);
if (password === passwordConf) {
this.props.registerUser(creds, this.props.history);
} else {
this.setState({passErr: "Passwords Don't Match"})
}
}