Reputation: 99
I already define error. however, it is giving error that "TypeError: Cannot read property 'error' of undefined"
I am stock here. I will appreciate idea to go beyond this.
Thank you for your help.
Error screenshot
Signup Component code
import React , {useState} from 'react';
import { signup } from '../../../actions/auth';
const SignupComponent = () => {
const [values, setValues] = useState({
firstname: '',
lastname: '',
email: '',
phonenumber: '',
password: '',
confirmpassword: '',
howdidyouknowaboutus: '',
error: '',
loading: false,
message: '',
showForm: true
});
const {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus, error, loading, message, showForm} = values;
const handleSubmit = e => {
e.preventDefault();
/* console.table({firstname, lastname, email, phonenumber, password, confirmpassword,howdidyouknowaboutus,
error, loading, message, showForm}); */
setValues({...values, loading: true, error: false})
const user = {firstname, lastname, email, phonenumber, password, confirmpassword, howdidyouknowaboutus}
signup(user).then(data => {
if (data.error) { ----------------------------------------------- The line with the error
setValues({...values, error: data.error, loading: false});
}else{
setValues({
...values,
firstname: '',
lastname: '',
email: '',
phonenumber: '',
password: '',
confirmpassword: '',
howdidyouknowaboutus: '',
error: '',
loading: false,
message: data.message,
showForm: false
});
}
});
};
};
export default SignupComponent;
Thank you
Upvotes: 2
Views: 1121
Reputation: 99
Thank you. This work. But, the post request to backend is pending, checking the network capture. No error at the console. However, the pending is pointing to this code
import fetch from 'isomorphic-fetch';
import {API} from '../config';
export const signup = (user) => {
return fetch(`${API}/signup`, { ----- pending status pointing to this line
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
.then(response => {
return response.json()
})
.catch(err => console.log(err));
};
Upvotes: 0
Reputation: 16
Console.log(data) to check the response first, and maybe screen shoot and post the service for signup as any data receive will be coming from the response on the service itself. make sure you have a catch for the error in the signup service as well.
Update
in your API you catch the error with something like :
return res.status(400).json({
errorMessage: "Username already taken",
});
}
then in your front end :
function internalServerError(err) {
if (err.response && err.response.data && err.response.data.errorMessage) {
return {
status: false,
errorMessage: err.response.data.errorMessage,
};
}
return {
status: false,
errorMessage: "Internal server error. Please check your server",
};
}
and in your API call you can catch the error with something like this :
export function signup(credentials) {
return // here your call to the server
.then(successStatus)
.catch(internalServerError);
}
Upvotes: 0
Reputation: 348
UPD
signup(user).then(data => {
if (data) { // check here if data not undefined
if (data.error) {
setValues({...values, error: data.error, loading: false});
}else{
setValues({
...values,
firstname: '',
lastname: '',
email: '',
phonenumber: '',
password: '',
confirmpassword: '',
howdidyouknowaboutus: '',
error: '',
loading: false,
message: data.message,
showForm: false
});
}
} else {
// probably here you would need to do something if dada is undefined
}
});
Previous reply
Change it to
if (data && data.error)
to be sure that data is defined
Upvotes: 2