javascript - 反应如何处理访问对象深处的变量，如果它并不总是存在

Question

在我的应用程序中，我有一个用于创建公司的页面，以及一个用于编辑其详细信息的页面。

它们是相同的，除了一个将开始为空而另一个将预先填充详细信息（如果存在）。

我试图在这里使用相同的组件，并有一个变量isEditing = true/false

我的公司 obj 看起来像这样

address: {address: "asdf", city: "asdf", country: "asdf", postal: "asdf"}
company_id: 44
contact: {firstName: "asdf", lastName: "asdf", personalEmail: "asdf", phone1: "asdf", phone2: "asdf", …}
email: "asdf"
name: "my company"

我以前没有问题，但是当我决定将地址/联系人字段分组到一个 obj 中时，它开始崩溃。

例如，将值分配给我的城市字段时，我会这样做 value = {companyDetails.address.city}

当我创建公司时，状态 companyDetails = {}

这会导致错误cannot access .city of undefined because companyDetails.address does not exist etc.

我在编辑公司页面上解决了这个问题，加载状态等待 company.address 存在，但这在创建页面上不起作用，因为它永远不会存在？

我目前通过设置初始状态在创建页面上解决了这个问题

commanyDetails = {
    name:"",
    email:"",
    address: {},
    contact: {},
    notes:""
}

而不是 ，companyDetails={}这是处理它的最佳方法吗？我真的不喜欢它所以我在这里..

谢谢你的帮助！

标签： javascriptreactjs

Answer 1

您可以使用运算符防止嵌套的属性访问链中的任何步骤使您的程序崩溃&&，如下所示：

companyDetails && companyDetails.address && companyDetails.address.city

这将返回undefined，或者null如果在此过程中遇到的任何步骤是，而不是因错误而崩溃：请参阅此页面，尤其是本节。

语言规范现在包括一个新的运算符，以减少冗长，特别是对于长链：

companyDetails?.address?.city

但请注意，浏览器对此的支持还不是特别好。