Firebase getDownloadUrl起初无法重新加载页面

Question

当我试图用图像url显示我的图像时，我得到了一个错误404，找不到，然后当我重新加载页面时，图像出现了。我知道这是因为图片没有时间先上传，但我不知道如何解决这个问题。如果你有任何想法，这是代码：

我首先创建一个用户，为我的图像创建一个ref，然后将我的ref放在我的数据库中，然后在我的个人资料页面上获取我的数据，并使用getDownloadUrl方法获取我的图像url和我的ref，但正如我之前所说，我需要首先重新加载页面，以免出现错误。

.createUserWithEmailAndPassword(email.value, password.value)
.then(registeredUser => {
const storageRef = app.storage().ref();
const fileRef = storageRef.child(registeredUser.user.uid + "/profile.jpg");
fileRef.put(file);
app.firestore().collection('Users')
.add({
uid: registeredUser.user.uid,
firstName: firstName.value,
lastName: lastName.value,
email: email.value,
companyName: companyName.value,
companyDomain: companyDomain.value,
profileImage: registeredUser.user.uid + "/profile.jpg"
})

let imageRef = userData[0].profileImage
const imageUrl = (async () => {
let imagePath = await app.storage().ref().child(imageRef).getDownloadURL()
setProfileImage(imagePath)
})()
return (
<>
<Nav />
<div className="container">
<h1>Profile</h1>
<div className="profile_container">
<div className="image_container">
<img src={profileImage} alt="profileImage" />
</div>
<div className="info_profile_container">
<h3><strong>First Name:</strong> {userData[0].firstName}</h3>
<h3><strong>Last Name:</strong> {userData[0].lastName}</h3>
<h3><strong>Email:</strong> {userData[0].email}</h3>
<h3><strong>Company Name:</strong> {userData[0].companyName}</h3>
<h3><strong>Company 

Answer 1

您的示例不完整，因此我将为您提供伪代码。

试着使用效果来获得你需要的东西。这将在每次userData更改时检索图像。

useEffect(() => {
if (userData) imageUrl(); //check whether userData is valid before fetching
}, [userData]) //get the image every time userData props changes.
const imageUrl = async() => {
let imagePath = await app.storage().ref().child(imageRef).getDownloadURL()
setProfileImage(imagePath)
})

Answer 2

const Profile = () => {
const { currentUser } = useContext(AuthContext);
const [userData, setUserData] = useState()
const [profileImage, setProfileImage] = useState()
const users = app.firestore().collection('Users')
useEffect(() => {
users
.where("uid", "==", `${currentUser.uid}`)
.get()
.then((snapshot) => {
const data = snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data()
}))
setUserData(data)
console.log(data)
})

}, [userData])

if (!userData) {
return <h1>Loading...</h1>
} else {
let imageRef = userData[0].profileImage
const imageUrl = async () => {
let imagePath = await app.storage().ref().child(imageRef).getDownloadURL()
setProfileImage(imagePath)
}
return (
<>
<Nav />
<div className="container">
<h1>Profile</h1>
<div className="profile_container">
<div className="image_container">
<img src={profileImage} alt="profileImage" />
</div>
<div className="info_profile_container">
<h3><strong>First Name:</strong> {userData[0].firstName}</h3>
<h3><strong>Last Name:</strong> {userData[0].lastName}</h3>
<h3><strong>Email:</strong> {userData[0].email}</h3>
<h3><strong>Company Name:</strong> {userData[0].companyName}</h3>
<h3><strong>Company Domain:</strong> {userData[0].companyDomain}</h3>
</div>
</div>
<button className="danger" onClick={() => app.auth().signOut()}>Sign out</button>
</div>
</>
);
}
};