ReactJS中如何查看Firebase Storage存储桶指定文件夹内的所有图片

问题原因 #

• 状态更新时数组引用未变化：你定义的images数组是组件顶层的可变对象，每次push操作不会生成新的数组，调用setAllRandomImages时传入的始终是同一个数组引用，React浅比较判断状态无变化，会跳过后续的重渲染，所以只能看到第一次更新后的单张图片。
• 异步逻辑处理不规范：getDownloadURL是异步接口，你在每个请求返回后单独更新状态，会触发多次不必要的重渲染，还可能因为异步返回顺序混乱导致数组内容不符合预期。
• 列表渲染缺少唯一key：map遍历渲染图片时没有给img元素添加key属性，会导致React无法正确追踪列表项的变化，也可能引发渲染异常。

修复方案 #

将异步请求批量处理，等所有图片URL获取完成后统一传入新数组更新状态，同时补充列表项的key属性，修改后代码如下：

const [allRandomImages, setAllRandomImages] = useState([])

const getRandomImages = async () => {
    const storageRef = storage.ref(`random/${AWB}`)
    const listResult = await storageRef.listAll()
    // 生成所有获取URL的异步任务
    const urlTasks = listResult.items.map(imageRef => imageRef.getDownloadURL())
    // 等待所有异步任务完成，拿到完整URL列表
    const allImageUrls = await Promise.all(urlTasks)
    // 传入全新数组触发状态更新
    setAllRandomImages(allImageUrls)
}

useEffect(() => {
  getRandomImages()
}, []);

return (
         <div>
                
            <a><img id="packing"  alt="" style={styles}  /></a>
            <a><img id="commercial"  alt="" style={styles} /></a>
            <a><img id="cof"  alt="" style={styles} /></a>
            <a><img id="otherdoc"  alt="" style={styles} /></a>
            
              
                  { allRandomImages.map((img) => (
                    <img key={img} src={img} alt="" />
                  ))}
             
         </div>
)

如果修复后仍有图片无法加载，可以检查打印出来的URL是否可以直接在浏览器访问，排查Firebase Storage的权限规则和CORS配置问题即可。

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