Firebase 存储图像 URL 正在控制台单击记录，但未使用 ReactJS 在页面上更新

Question

我有一个 React 项目，我从 firebase 存储中获取照片 URL（getPhotoArray 函数），当我单击按钮时，控制台记录了正确的 url，但它没有显示在我的页面上。

我在 firebase 存储文件夹中有多张照片，并且我在数组中记录了正确数量和正确的照片控制台（在 getPhotoArray 函数中）

export const getPhotoArray = async (selectedDonation, setPhotos) => {
  const listRef = ref(storage, '/Images/'+selectedDonation.id);
  const images = []
  listAll(listRef)
    .then((res) => {
      if (res.items.length > 0) {
        res.items.forEach((itemRef) => {
          // Get the download URL
          getDownloadURL(ref(storage, itemRef.fullPath))
          .then((url) => {
            images.push(url)
          })
          .catch((error) => {
          });
        });
        setPhotos(images)
        console.log(images)
      }else {
        toast.info('No Photos Found, Please Try Again Later')
      }
    }).catch((error) => {

    });   
}

import React, {useEffect, useMemo, useState} from 'react'
import './donation_information.css'
import {getReceiptURL, getPhotoArray} from '../../API/FirestoreAPI' 

export default function DonationInformation({ selectedDonation, selectedDonationSteps }) {
  const [Photos, setPhotos] = useState([]);
 
  const getPhotos = () => {
    getPhotoArray(selectedDonation, setPhotos)
  }

 useEffect(() => {
  setURL('')
  setPhotos([])
 }, [selectedDonation]);

  return (
    <div className='donationInformation'>
        <div className='download-photos'>
          <button onClick={getPhotos}>Show Photos</button>
          {
            useMemo(() => {
              Photos.map((photo) => {
                return <img src="photo" key={photo} alt="" />
              })
            }, [Photos])
          }
        </div>
        </div>
    </div>
  )
}

我尝试用 useEffect 包装 Photos.map，这是我唯一能想到的

Answer 1

您需要将大括号 {} 添加到您的

您当前的代码：

return <img src="photo" key={photo} alt="" />

需要更新为

return <img src={photo} key={photo} alt="" />