React中如何正确判断嵌套对象属性是否存在避免渲染报错？

错误原因分析 #

• 首次触发TypeError的原因：你直接访问item.volumeInfo.imageLinks.thumbnail时，只要中间任意一级嵌套属性（volumeInfo、imageLinks）不存在，就会触发读取undefined属性的报错，并非只有thumbnail不存在才会出问题。
• 后续使用in运算符不生效的原因：thumbnail属性并不在item根层级，而是嵌套在item.volumeInfo.imageLinks下，你写的'thumbnail' in item判断条件永远为假，自然不会渲染任何内容。

解决方案 #

方案1：ES2020+ 可选链写法（最简洁） #

可选链会自动逐层判断属性是否存在，任意一层不存在就会返回undefined，不会触发报错：

this.state.jsonArray.map(item => {
  if (item?.volumeInfo?.imageLinks?.thumbnail) {
    // 注意img标签必须加alt属性，否则React会触发警告
    return <img src={item.volumeInfo.imageLinks.thumbnail} alt="封面" />
  }
  // 无缩略图时返回null即可
  return null
})

也可以直接用短路语法简化，不需要写if判断：

this.state.jsonArray.map(item => 
  item?.volumeInfo?.imageLinks?.thumbnail && <img src={item.volumeInfo.imageLinks.thumbnail} alt="封面" />
)

方案2：兼容旧版本的逐层判断写法 #

如果你的项目不支持ES2020语法，就手动逐层判断所有父级属性是否存在：

this.state.jsonArray.map(item => {
  if (item.volumeInfo && item.volumeInfo.imageLinks && item.volumeInfo.imageLinks.thumbnail) {
    return <img src={item.volumeInfo.imageLinks.thumbnail} alt="封面" />
  }
  return null
})

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