Question

无法读取未定义的属性（读取‘some_props’）[关闭]

2021-11-01

1679

javascript reactjs

我对 React 条件渲染有疑问。如果设置了某个特定的 prop，我想渲染它，因此首先检查该 prop 是否存在，然后输出它，否则输出 0，但是 React 在第一次加载时未定义变量时检查变量是否存在时出现问题...

number:
    props.dashboardCards[0].items.thisMonth[0].itemTitle
      ? props.dashboardCards[0].items.thisMonth[0].itemTitle
      : 0,

这是我的代码，我想创建一个带有数字字段的对象，并且我想在该字段中设置这个 prop（如果存在），否则为 0。而 React 一直给我错误：

TypeError: Cannot read properties of undefined (reading 'itemTitle')

Answer 1

thisMonth 可能为空或未定义。您可以使用可选链接来解决这个问题：

number: props.dashboardCards[0]?.items?.thisMonth[0]?.itemTitle ?? 0,

现在，如果 props.dashboardCards[0].items.thisMonth[0].itemTitle 存在，则 number 将是它的值，否则它将为 0。

可选链接运算符 (?.) 使您能够读取位于连接对象链深处的属性的值，而无需检查链中的每个引用是否有效。

从此处了解有关可选链接的更多信息。

Answer 2

错误表明 thisMonth 数组中没有 itemTitle 。

如果它来自 API，则需要等待才能获取它。您可以简单地通过 console.log(props) 检查 props ，并在使用点符号获取 itemTitle 之前检查它。

您还可以使用可选链 ? 检查值：

props?.dashboardCards[0]?.items?.thisMonth[0]?.itemTitle

这意味着：

if(props){
  if(dashboardCards[0]){
    if(items){
      if(thisMonth[0]){
        props.dashboardCards[0].items.thisMonth[0].itemTitle
      }
    }
  }
}