React JSX中用三元运算符处理嵌套属性不存在时返回长度为0的问题

你可以从以下两种实现方式中选择适配你项目环境的写法：

• 可选链+空值合并运算符（ES2020+支持，写法最简洁）
  代码示例：

  <p>{ProductDetail?.brand?.shoes?.size?.length ?? 0}</p>
  

  说明：?.可选链会逐层校验属性是否存在，任意一层属性不存在就会直接返回undefined；??空值合并运算符仅在左侧值为undefined/null时返回右侧的0，不会过滤合法的0长度、空字符串等返回值，比逻辑或||更安全。
• 三元运算符兼容写法（无ES版本要求，适配所有JS运行环境）
  代码示例：

  <p>{
    ProductDetail && ProductDetail.brand && ProductDetail.brand.shoes && ProductDetail.brand.shoes.size
      ? ProductDetail.brand.shoes.size.length
      : 0
  }</p>
  

  说明：逐层判断每一级属性是否存在，所有属性都存在时才取length属性，否则直接返回0。

如果需要进一步兼容size字段不是数组的异常情况，可以加上数组类型校验，避免返回NaN：

<p>{Array.isArray(ProductDetail?.brand?.shoes?.size) ? ProductDetail.brand.shoes.size.length : 0}</p>

内容的提问来源于stack exchange，提问作者ssksksks