Question

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

错误的一个例子是：

TypeError：无法读取属性＆＃39; item＆＃39;未定义的

Answer 1

您好像正在尝试访问变量x的属性x。

如果undefined是x.items，那么调用if (x) { // CODE here }会给出您提到的错误。

做一个简单的事：

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

或

sess.execute(s"""CREATE TABLE IF NOT EXISTS test.details(
                         | userId text,
                         | name text,
                         | age text,
                         | date date,
                         | PRIMARY KEY (date))
                         | WITH CLUSTERING ORDER BY (time DESC)""".stripMargin)

Answer 2

在简单的功能中，您只需使用if语句即可。

＆＃13;

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

＆＃13;

在JSX中你就是这样做的。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

This post讨论了您的反应应用中的一些错误处理策略。

但在你的情况下，我认为使用try-catch子句将是最方便的。

let results;
const resultsFallback = { items: [] };
try {
  // assign results to res
  // res would be an object that you get from API call
  results = res.items;
  // do stuff with items here
  res.items.map(e => {
    // do some stuff with elements in items property
  })
} catch(e) {
  // something wrong when getting results, set
  // results to a fallback object.
  results = resultsFallback;
}

我假设您仅将其用于一个特定的讨厌反应组件。如果您想处理类似类型的错误，建议您在上面的博文中使用ReactTryCatchBatchingStrategy。

Answer 4

检查任何此类问题的最佳方法是在Google控制台中运行测试代码。就像进行空检查一样，只需检查一下 if(!x) 要么 if(x==undefined)

Answer 5

当引用或函数可能未定义或为null时，可选的链接运算符提供了一种简化通过连接的对象访问值的方法。

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
let customerCity = customer.details?.address?.city;

在ReactJS中处理空值的最佳方法是什么？

5 个答案: