Firebase未刷新图像(React)

Question

我使用带有react的firebase来存储图像，这样用户就可以将它们上传到那里，然后让它们显示出来，我设法显示上传的图像，但当我刷新页面时。图像被删除，我的函数userProfileImage((似乎没有更新图像，我该如何保留图像？

const [image, setImage] = useState(null);
const [url, setUrl] = useState("");
const [progress, setProgress] = useState(0);

const handleChange = e => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const imagesListRef = ref(storage, "images/");

useEffect(() => {
list(imagesListRef).then((response) => {
response.items.forEach((item) => {
getDownloadURL(item).then((url) => {
setUrl(url);
console.log(url);
});
});
});
}, []);


const handleUpload = () => {
const uploadTask = 
storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_changed",
snapshot => {
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
error => {
console.log(error);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
setUrl(url);
});
}
);
userProfileImage();
};

return (
<div className='App'>
<Header/>
<br />
<br />
{progress > 0 && progress < 100 ?
<progress value={progress} max="100" /> : <div></div>
}
<div class="proPic">
<Avatar src={url} sx={{ width: 250, height: 250 }} />
<input type="file" onChange={handleChange} />
<button onClick={handleUpload}>Submit</button>
</div>
</div>
)
}

Answer 1

刷新时，所有组件也将被刷新。因此，所有状态都将被重新初始化。因此，当您刷新时，url将再次为null。因此，您应该在刷新组件时检索图像。您可以在useEffect挂钩中检索上传的图像。

useEffect(()=>{
//retrieve image
},[]}