React JS中如何展示Firebase Storage v9存储的所有图片

问题原因 #

• 你初始化url状态为数组类型，但在getDownloadURL回调中调用setUrl时传入了对象，类型不匹配导致后续map方法调用失效
• 循环获取下载链接时每次直接覆盖url状态，最终只会保留最后一张图片的链接，无法存储所有图片地址

修正后的Firebase v9版本代码 #

逻辑部分 #

const [urlList, setUrlList] = useState([]);

useEffect(() => {
  const overviewRef = ref(storage, `behance_projects/${params.id}/`);
  listAll(overviewRef)
    .then(async (res) => {
      // 批量获取所有图片的下载链接，避免多次触发状态更新
      const urlPromiseArr = res.items.map(imageRef => getDownloadURL(imageRef));
      const allFetchUrl = await Promise.all(urlPromiseArr);
      // 统一更新状态
      setUrlList(allFetchUrl.map(fetchUrl => ({
        urlLink: fetchUrl
      })));
    })
    .catch((err)=> {
      console.log(err)
    })
}, [params.id]);

渲染部分 #

{
  urlList.map((item, index) => {
    return <img 
      src={item.urlLink} 
      key={index} 
      alt="images" 
      style={{width: "100%", height: "auto"}}
    />
  })
}

可选优化说明 #

如果你需要保留原有的forEach遍历逻辑，可将状态更新改为函数式写法，避免覆盖旧状态：

res.items.forEach((imageRef) => {
  getDownloadURL(imageRef).then((fetchUrl) => {
    setUrlList(prev => [...prev, {urlLink: fetchUrl}])
  })
})

该写法会在每次获取到单张图片链接时更新状态，会触发多次渲染，性能弱于批量更新的写法。

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