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

IT技术 javascript reactjs javascript-objects
2021-05-11 09:40:23

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

错误的一个例子是：

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

4个回答

看起来您正在尝试访问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)
  • 在简单函数中，您只需通过 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>

这篇文章讨论了 React 应用程序中的一些错误处理策略。

但是在您的情况下，我认为使用 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;
}

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

检查任何此类问题的最佳方法是在 google 的控制台中运行您的测试代码。就像空检查一样，可以简单地检查 if(!x) 或 if(x==undefined)

其它你可能感兴趣的问题
上一篇Z轴步进电机工作不正常 下一篇自 cura 3.1 以来支持界面的问题