Javascript 如何从firebase存储映射React中的图像？

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

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>
    ) 
})}

{productList.map（（val）=>{
返回(
产品名称：{val.title}
价格：{val.Price}
数量：{val.Quantity}
图像：{val.imageURL}
) 
})}

问题：

您没有在

getImages

函数中设置

productList

。您只是在数组上迭代

getDownloadURL

是一个

async

函数，您不应该在循环内使用它。最好的方法是通过

递归

函数。但您也可以按以下方式执行此操作：

解决方案 您的

getImage

函数

const getImage = async (bannerImage) => {
     const url = await storageRef.child(bannerImage).getDownloadURL();
     return 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: {getImage(val.bannerImage)}</h2>
            </div>
        </div>
    ) 
})}

然后您的

映射

功能

const getImage = async (bannerImage) => {
     const url = await storageRef.child(bannerImage).getDownloadURL();
     return 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: {getImage(val.bannerImage)}</h2>
            </div>
        </div>
    ) 
})}

{productList.map（（val）=>{
返回(
产品名称：{val.title}
价格：{val.Price}
数量：{val.Quantity}
图像：{getImage（val.bannerImage）}
) 
})}

我建议您为图像渲染创建另一个小组件，并在该组件内处理

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>
    ) 
})}

函数ProductImage（{bannerImage}）{
常量[imageUrl，setImageUrl]=useState（“”）
useffect（（）=>{
异步函数getImage（bannerImage）{
const url=await bannerImage.getDownloadURL（）
setImageUrl（url）
}
getImage（bannerImage）
}，[bannerImage]）
返回imageUrl？图像：{imageUrl}：“…正在加载”
}

并在主组件中使用此组件

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>
    ) 
})}

{productList.map（（val）=>{
返回(
产品名称：{val.title}
价格：{val.Price}
数量：{val.Quantity}
) 
})}

谢谢！但现在它抛出了一个错误：错误：对象作为React子对象无效（找到：[object Promise]）。如果要呈现子对象集合，请改用数组。此错误指向useEffect（）中的setProductList（）。好的，您可以通过执行console.log来告诉我什么是val.bannerImage吗？是一根绳子还是别的什么东西！这是一个[object Promise]Promise{}Promise:Promise[[PromiseState]]：“已完成”[[PromiseSult]]：”“您能在控制台中检查getImage内部的

url

吗？要试试这个！这对你有用吗？