Firebase getDownloadUrl 起初不起作用我需要重新加载页面

Question

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

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

.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>
      </>
    );
  }
};