CODEWITHSUNDEEP
reactjsnext.js
Emmanuel Oga
Emmanuel Oga

Reputation: 99

TypeError: Cannot read property 'error' of undefined

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

enter image description here

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

Answers (3)

Emmanuel Oga
Emmanuel Oga

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

enter image description here

Upvotes: 0

Milena Martinez
Milena Martinez

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

2u4u
2u4u

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

Related Questions