React混合资源数组匹配MIME类型取首张图渲染到img标签的报错排查

• 第一种写法的兜底逻辑位置完全错位：|| {}被写在了filter的回调内部，根本没有起到“给筛选结果兜底”的作用。filter的判定规则是，只要回调返回真值就会把当前元素纳入结果数组，当遇到非图片类型的条目时，代码会返回空对象{}作为回调值——空对象是真值，会被filter误判为符合筛选条件保留下来。这些混入结果的无效对象根本没有blob_url属性，自然拿不到正确的图片地址。
• 第二种写法缺少空场景边界处理：当筛选完成后数组为空时，取数组下标0会得到undefined，直接访问undefined.blob_url就会触发运行时报错。

核心是把筛选、取值、兜底的流程按层级拆开，不要把不同逻辑混写在一行：

1. 先严格按照mime_type条件，筛选出所有符合jpeg、png要求的图片资源
2. 判断筛选结果是否非空，存在时取第一个元素的blob_url，不存在时给空字符串（或默认占位图地址）做兜底

类组件场景推荐把图片取值逻辑抽成独立方法，避免JSX内联过于复杂的判断：

// 类组件内定义方法
getFirstValidImageUrl() {
  const validImages = this.state.images.filter(item => 
    item.mime_type === 'image/jpeg' || item.mime_type === 'image/png'
  )
  return validImages.length ? validImages[0].blob_url : ''
}

// JSX中使用
<img 
  className="img-fluid img-list" 
  src={this.getFirstValidImageUrl()} 
  alt="" 
/>

如果需要在JSX内联完成逻辑，要把兜底放在正确的层级，配合可选链规避空值报错：

<img 
  className="img-fluid img-list" 
  src={this.state.images
    .filter(item => item.mime_type === 'image/jpeg' || item.mime_type === 'image/png')[0]?.blob_url || ''
  } 
  alt="" 
/>

• filter的回调函数只需要返回布尔值判断是否保留当前元素，不要在回调里夹带返回对象的兜底逻辑，否则会直接打乱筛选结果
• 访问数组下标的属性时，必须做空值判断，避免空数组场景下的访问报错
• 无有效图片时给src传空字符串，比传undefined更友好，不会触发控制台的资源加载异常

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