設置初始狀態以避免錯誤的最佳方法是：「不能讀取未定義的屬性」？

我正在從服務器獲取一些用戶數據。該數據用於設置React組件的初始狀態。此初始狀態必須具有包含嵌套對象的對象initialValues。設置初始狀態以避免錯誤的最佳方法是：「不能讀取未定義的屬性」？

爲了避免錯誤：「不能讀取的未定義的屬性」，由：

初始渲染AJAX調用等待時間;
從服務器獲取的UserData對象中存在空值的可能性（並非每個用戶都需要有地址，汽車信息...）;

如果每個UserData屬性的值爲null，則會檢查每個UserData屬性，然後爲其分配一個值。

下面是mapStateToProps功能與對象我創建：

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

這initialValues對象做的工作和應用程序工作正常。然而，我感覺我做錯了什麼。有沒有更好的方法來替換未定義的值，而不是爲每個單獨的組件編寫一個如此巨大的 initialValues對象，還有很多條件賦值？

來源

2017-02-10 blue_inka

取決於。如果這些值總是真的，（例如不是int 0），那麼可以使用快捷方式'data && data.propName || 「」'。 – Shilly

放入分離的對象初始值具有相同的結構：

this.defaultData = { 
    ajaxCallLink: "" 
    initialValues: { 
     firstname: "", 
     lastname: "", 
//..... 

}

然後使用Object.assign與默認到延伸您的對象：

const data = state.userData.userData; 
return Object.assign(this.defaultData, data)

然而，由於該數據對象的深度是大於1，則需要deep assign而不是Object.assign。

來源

2017-02-10 11:52:10

設置初始狀態以避免錯誤的最佳方法是：「不能讀取未定義的屬性」？

回答

相關問題