React.js中如何提前过滤外部API返回数组中的损坏图片再传入Carousel组件

解决方案 #

你可以先对所有图片资源做预加载校验，只把加载成功的有效图片筛选出来，再传入轮播组件渲染，核心逻辑是用Image对象手动检测图片的可访问性，全程不会造成图片重复加载，预加载的资源会被浏览器缓存，后续轮播渲染时会直接读取缓存。

1. 封装图片有效性校验工具函数 #

// 输入图片url，返回是否可正常加载的布尔值
const checkImageValid = (url) => {
  return new Promise((resolve) => {
    const testImg = new Image()
    // 加载成功返回有效
    testImg.onload = () => resolve(true)
    // 加载失败返回无效
    testImg.onerror = () => resolve(false)
    // 可选：加超时逻辑，超过3s加载失败的图片也直接丢弃
    setTimeout(() => resolve(false), 3000)
    testImg.src = url
  })
}

2. 接口请求完成后先过滤有效图片 #

拿到API返回的原始图片数组后，不要直接传入轮播，先批量校验过滤后再存到状态里使用：

import { useState, useEffect } from 'react'

// 存储过滤后的有效图片数组
const [validImages, setValidImages] = useState([])
// 可选：加校验中状态，展示骨架屏
const [isChecking, setIsChecking] = useState(true)

useEffect(() => {
  const filterValidImages = async () => {
    // 这里替换成你自己的请求API获取图片数组的逻辑
    const originImages = await fetchYourImageApi()
    // 并行校验所有图片的有效性
    const validCheckResult = await Promise.all(
      originImages.map(img => checkImageValid(img.url.bigger))
    )
    // 只保留加载成功的图片
    const filtered = originImages.filter((_, index) => validCheckResult[index])
    setValidImages(filtered)
    setIsChecking(false)
  }

  filterValidImages()
}, [])

3. 轮播组件直接使用过滤后的数组渲染 #

把原来遍历的images替换成过滤后的validImages即可，原有unloader兜底逻辑可以保留处理极端边缘情况：

{validImages.map((img, i) => (
  <Dot
    key={i}
    type="button"
    onClick={() => {
      setThumbsPosition(i);
      goToSlide(i);
      setActiveSlide(i);
    }}
    active={activeSlide === i}
    ref={i === 0 && slideRef}
  >
    <SliderDotImage>
      <Img
        loading="lazy"
        src={[img.url.bigger]}
        unloader={<MissingImage small />}
      />
    </SliderDotImage>
  </Dot>
))}

可选优化 #

• 如果图片数量过大，可以给Promise.all加并发数控制，避免一次性发起过多请求阻塞页面其他资源加载
• 校验通过的图片url可以做本地缓存，下次同域名同路径的图片不用重复校验

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