Javascript 如何在React中显示firebase存储中的所有图像？

我正在尝试在我的React应用程序中显示Firebase存储中的图像。 我可以使用listall从Firebase存储中获取所有图像。 但我不知道如何在ui上显示这些。 我尝试使用映射方法，但没有成功。 此外，我希望即使重新加载页面，也能保持这些显示。 我应该使用localstrage还是useEffect

请帮帮我。 这是我的密码

const PhotoButton = () => {


    var storageRef = firebase.storage().ref("images");
  
    const [image, setImage] = useState("");
    const [imageUrl, setImageUrl] = useState([]);
    const handleImage = event => {
        const image = event.target.files[0];
        setImage(image);
    };

    const onSubmit = event => {
        event.preventDefault();
        if (image === "") {
          console.log(“error);
          return;
        }
      
        const uploadTask = storage.ref(`/images/${image.name}`).put(image);
        uploadTask.on(
          firebase.storage.TaskEvent.STATE_CHANGED,
          next,
          error,
          complete
        );
    };

    const complete = () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then(fireBaseUrl => {
            setImageUrl(fireBaseUrl);
          });
    };

    // Now we get the references of these images
    storageRef.listAll().then(function(result) {
        result.items.forEach(function(imageRef) {
        // And finally display them
        console.log(result.items);
        displayImage(imageRef);
        });
    }).catch(function(error) {
        alert(“error!”)
    });
  
    function displayImage(imageRef) {
        imageRef.getDownloadURL().then(function(url) {
            setImageUrl.push(url);
        // TODO: Display the image on the UI
        }).catch(function(error) {
        // Handle any errors
        });
    }
   
    return(
        <div>
            <h3 className={classes.addPhotoText}>Photos</h3>
            <div className="addphoto">
            <form onSubmit={onSubmit}>
                <input type="file" onChange={handleImage} />
                <Button type="submit" className={classes.PhotoButton}>Submit</Button>
            </form>
            </div>
            <img src={imageUrl} />

            {imageUrl.map((url) => (
                <img src={url}/>
            ))}
        </div>
    );

}

export default PhotoButton

constphotobutton=（）=>{
var storageRef=firebase.storage（）.ref（“图像”）；
const[image，setImage]=useState（“”）；
const[imageUrl，setImageUrl]=useState（[]）；
const handleImage=事件=>{
const image=event.target.files[0]；
设置图像（图像）；
};
const onSubmit=事件=>{
event.preventDefault（）；
如果（图像==“”）{
console.log（“错误”）；
返回；
}
const uploadTask=storage.ref（`/images/${image.name}`）.put（image）；
上传任务(
firebase.storage.TaskEvent.STATE_已更改，
下一个
错误，
完成
);
};
常量完成=（）=>{
存储
.ref（“图像”）
.child（image.name）
.getDownloadURL（）
。然后（fireBaseUrl=>{
setImageUrl（fireBaseUrl）；
});
};
//现在我们得到这些图像的参考
storageRef.listAll（）.then（函数（结果）{
result.items.forEach（函数（imageRef）{
//最后展示它们
console.log（result.items）；
显示图像（imageRef）；
});
}).catch（函数（错误）{
警报（“错误！”）
});
函数displayImage（imageRef）{
imageRef.getDownloadURL（）.then（函数（url）{
setImageUrl.push（url）；
//TODO:在UI上显示图像
}).catch（函数（错误）{
//处理任何错误
});
}
返回(
照片
提交
{imageUrl.map（（url）=>(
))}
);
}
导出默认照片按钮

它与此代码一起工作

useEffect(() => {
    const fetchImages = async () => {

    let result = await storageRef.child('images').listAll();
        let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());
    
        return Promise.all(urlPromises);

    }
    
    const loadImages = async () => {
        const urls = await fetchImages();
        setFiles(urls);
    }
    loadImages();
    }, []);

---

它与此代码一起工作

useEffect(() => {
    const fetchImages = async () => {

    let result = await storageRef.child('images').listAll();
        let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());
    
        return Promise.all(urlPromises);

    }
    
    const loadImages = async () => {
        const urls = await fetchImages();
        setFiles(urls);
    }
    loadImages();
    }, []);

---

这将不起作用，因为

setImage

是一个

useState

值设置程序，您需要将处理程序传递到useffect/useLayoutEffect才能起作用。这将不起作用，因为

setImage

是一个

useState

值设置程序，您需要将处理程序传递到useffect/useLayoutEffect才能起作用