What is the best way to set initial state to avoid error: "can not read property of undefined"?

Vote count: 0

I am fetching some user data from a server. This data are used to set initial state passed then to a React Component. This initial state has to have the object initialValues that contains also nested object.

To avoid the error: "can not read property of undefined", caused by:

1. ajax call latency for initial rendering;

2. the possibility of null values in the UserData object fetched from the server (not every user needs to have an address, car information ...);

   every UserData property is checked if its value is null, and then a value is assigned to it.

Below is the mapStateToProps function is the object I have created:

function mapStateToProps(state) {
const data = state.userData.userData;
return {
    userName: `${data.firstname || "User Name"} ${data.surname || ""}`,
    ajaxCallLink: (data._links == undefined) ? "" : data._links.self.href,
    initialValues: {
        firstname: data.firstname || "",
        surname: data.surname || "",
        jobTitle: data.jobTitle || "",
        dob: data.dob || "",
        pps: data.pps || "",
        phone: data.phone || "",
        email: data.email || "",
        address: {
            addressLine1: (data.address == undefined) ? "" : (data.address.addressLine1 || ""),
            addressLine2: (data.address == undefined) ? "" : (data.address.addressLine2 || ""),
            addressLine3: (data.address == undefined) ? "" : (data.address.addressLine3 || ""),
            addressLine4: (data.address == undefined) ? "" : (data.address.addressLine4 || ""),
        },
        car: {
            make: (data.car == undefined) ? "" : (data.car.make || ""),
            model: (data.car == undefined) ? "" : (data.car.model || ""),
            engineSize: (data.car == undefined) ? "" : (data.car.engineSize || ""),
        },
        bankAccount: {
            accountType: (data.bankAccount == undefined) ? "" : (data.bankAccount.accountType || ""),
            accountNumber: (data.bankAccount == undefined) ? "" : (data.bankAccount.accountNumber || ""),
            sortCode: (data.bankAccount == undefined) ? "" : (data.bankAccount.sortCode || ""),
            bank: (data.bankAccount == undefined) ? "" : (data.bankAccount.bank || ""),
            paymentAdvice: (data.bankAccount == undefined) ? "" : (data.bankAccount.paymentAdvice || ""),
            iban: (data.bankAccount == undefined) ? "" : (data.bankAccount.iban || ""),
            bic: (data.bankAccount == undefined) ? "" : (data.bankAccount.bic || ""),
            address: {
                addressLine1: (data.bankAccount == undefined || data.bankAccount.address.addressLine1 == undefined) ? "" : (data.bankAccount.address.addressLine1 || ""),
                addressLine2: (data.bankAccount == undefined || data.bankAccount.address.addressLine2 == undefined) ? "" : (data.bankAccount.address.addressLine2 || ""),
                addressLine3: (data.bankAccount == undefined || data.bankAccount.address.addressLine3 == undefined) ? "" : (data.bankAccount.address.addressLine3 || ""),
                addressLine4: (data.bankAccount == undefined || data.bankAccount.address.addressLine4 == undefined) ? "" : (data.bankAccount.address.addressLine4 || ""),
            },
        }
    }
};

}

This initialValues object is doing its job and the app is working fine. However, I have the feeling that I am doing something wrong. Is the any better way to replace undefined values, just not to write for every single component, such a gigantic initialValues object, with so much conditional value assignment?

I would glad for any help :)

asked 35 secs ago

blue_inka

Let's block ads! (Why?)

What is the best way to set initial state to avoid error: "can not read property of undefined"?