javascript 检查未定义以防止应用中断答案

【问题标题】：javascript check on undefined to prevent app breakjavascript 检查未定义以防止应用中断
【发布时间】：2017-11-06 05:26:15
【问题描述】：

我经常错过一两次检查，从而破坏了整个应用程序。我真的觉得这是用 js 编写的一种痛苦，因为一个简单的错误可能会毁掉整个应用程序。

获取此代码

{this.state.floor && this.state.floor[this.state.selectedTab].units.length === 0 && <div>render something</div>}

如果未定义单位，则会出错。我该如何检查？第一次检查this.state.floor 似乎不起作用。我应该检查this.state.floor.length > 1吗？

如果返回的数据有嵌套或多个嵌套的属性，我的jsx有时会这么复杂。

【问题讨论】：

除了this.state.floor，你还需要检查this.state.floor[this.state.selectedTab]和this.state.floor[this.state.selectedTab].units是否存在。
@Titus 这就是我说的原因，检查让我的 jsx 看起来很乱，有什么解决方案吗？
并非如此，您可以像 TLadd 建议的那样将检查提取到它自己的函数中，或者创建一个使检查属性更容易的实用函数（例如：Utils.hasProp(obj, "prop1.prop2....")）但您必须进行检查如果您不确定属性是否存在。

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

你可以像这样使用 lodash get 函数：

const r = {a:{b:{name:'foo'}}};

const existence = !!_.get(r, 'a.b.name');// !! Convert to the returned value to boolean 

console.log(existence); // true

你能看到_.get第二个参数可以是'a.b.name'之类的属性路径

在你的情况下，我会这样做：

!!_.get(this.state, `floor[${this.state.selectedTab}].units.length`);

【讨论】：

我知道 lodash，这也是我现在最好的方法，但需要 !! 吗？
我知道 lodash，这也是我现在最好的方法，但需要 !! 吗？
不需要双感叹号，if里面也可以使用返回值。

【解决方案2】：

如果确定是否应该渲染某些东西的逻辑变得复杂，我通常会将其提取到一个函数中，而不是将其全部留在主渲染的 jsx 中。

renderSomething() {
  const { floor, selectedTab } = this.state
  if (floor && floor[selectedTab] && floor[selectedTab].units && floor[selectedTab].units.length === 0) {
    return <div>render something</div>
  }
  return null
}

render() {
  return (
    <div>
      {renderSomething()}
      {renderSomethingElse()}
    </div>
  )
}

如果您无法对自己的状态做出任何假设，那么上述检查应该是安全的。通常，如果您是控制数据的人，这会使某些检查变得不必要，那么您可能能够假设您的状态的一些事情。例如，您可能知道地板对象中的每个值都始终具有单位属性。因此，不需要floor[selectedTab].units。额外的检查显然不会造成任何伤害，但它可能会使代码变得混乱以始终添加通常是冗余检查的内容。

如果您在跟踪哪些值可能未定义并且确实需要额外的安全检查时感到痛苦，我绝对建议您使用flow 或typescript。让计算机做大量的簿记工作。

【讨论】：