如何从 Firebase 存储映射 React 中的图像？答案

【问题标题】：How can I map images in React from firebase storage?如何从 Firebase 存储映射 React 中的图像？
【发布时间】：2021-07-11 11:54:48
【问题描述】：

在这里，我试图从 MySQL 数据库中获取 productList，并为每个产品对象分配新属性 - imageURL 通过 getImages()。当我将 productList 记录到控制台时，存在具有正确 url 的属性 imageURL。问题是，当我尝试映射它时，它什么也没显示。为什么？

const storageRef = firebase.storage().ref("/assets")

const [productList, setProductList] = useState([])

useEffect(() => {
    Axios.get("http://localhost:3001/product/get").then((response) => {
        setProductList(response.data)
    })  
}, [])

useEffect(() => {
    getImages(productList)
}, [productList])


const getImages = (array) => {
    array.forEach((item) => {
        storageRef.child(`${item.bannerImage}`).getDownloadURL().then((url) => {
            item.imageURL = url
        })
    })
}

我的地图功能：

{productList.map((val) => {
    return (
        <div key={val.id} className="product">
            <div className="item">
                <h1>Product title: {val.title}</h1>
                <h2>Price: {val.price}</h2>
                <h2>Quantity: {val.quantity}</h2>
                <h2>IMAGE: {val.imageURL}</h2>
            </div>
        </div>
    ) 
})}

【问题讨论】：

标签： javascript mysql reactjs firebase-storage use-effect

【解决方案1】：

问题：

您没有在getImages 函数中设置productList。您只是在遍历数组。

getDownloadURL 是一个 async 函数，你不应该在循环中使用它。最好的方法是通过recursive 函数。但你也可以这样做：

解决方案

你的getImage函数

const getImage = async (bannerImage) => {
     const url = await storageRef.child(bannerImage).getDownloadURL();
     return url;   
}

然后是你的map 函数

{productList.map((val) => {
    return (
        <div key={val.id} className="product">
            <div className="item">
                <h1>Product title: {val.title}</h1>
                <h2>Price: {val.price}</h2>
                <h2>Quantity: {val.quantity}</h2>
                <h2>IMAGE: {getImage(val.bannerImage)}</h2>
            </div>
        </div>
    ) 
})}

【讨论】：

谢谢！但现在它抛出一个错误：错误：对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。此错误指向 useEffect() 中的 setProductList()。
好的，你能通过console.log告诉我val.bannerImage是什么吗？是字符串还是别的什么！
这是一个[object Promise]
Promise {} proto: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: ""
您能否在控制台中也检查一下 getImage 中的url？

【解决方案2】：

我建议您为图像渲染创建另一个小组件，并为该组件内的getDownloadURL 行为处理异步

function ProductImage({bannerImage}) {
  const [imageUrl, setImageUrl] = useState('')
  
  useEffect(() => {
    async function getImage(bannerImage) {
      const url = await bannerImage.getDownloadURL()
      setImageUrl(url)
    }
    getImage(bannerImage)
  }, [bannerImage])

  return imageUrl ? <h2>IMAGE: {imageUrl}</h2> : '...Loading'
 }

并在你的主组件中使用这个组件

{productList.map((val) => {
    return (
        <div key={val.id} className="product">
            <div className="item">
                <h1>Product title: {val.title}</h1>
                <h2>Price: {val.price}</h2>
                <h2>Quantity: {val.quantity}</h2>
                <ProductImage bannerImage={val.bannerImage} />
            </div>
        </div>
    ) 
})}

【讨论】：

试试这个！