在 ReactJS 中处理未定义值的最佳方式？

Question

我正在使用 ReactJS 访问 API。当 React Component 访问 API 提供的对象中可能“未定义”的属性时，阻止 React Component 崩溃的最佳方法是什么？

一个错误的例子是：

类型错误：无法读取未定义的属性“项目”

原文由 Nathan Horrigan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看起来您正在尝试访问变量的属性 items x 。

如果 x 是 undefined ，那么调用 x.items 会给你你提到的错误。

做一个简单的：

 if (x) {
  // CODE here
}

或者

if (x && x.items) { // ensures both x and x.items are not undefined
  // CODE here
}

编辑：

您现在可以使用 Optional Chaining ，它看起来不错：

 if (x?.items)

原文由 Kenny Meyer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

• 在简单的函数中，您只需通过 if 语句即可完成。

 if(typeof x !=='undefined' && typeof x.item !=='undefined'){

}

• 在 JSX 中，你可以这样做。

 render(){
return(
          <div>
          (typeof x !=='undefined' && typeof x.item !=='undefined')?
                <div>success</div>:
                <div>fail</div>
          </div>
          )
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

原文由 Rajat Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议