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

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

我首先创建一个用户并为我的图像创建一个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 

.createUserWithEmailAndPassword（email.value，password.value）
。然后（registeredUser=>{
const storageRef=app.storage（）.ref（）；
const fileRef=storageRef.child（registeredUser.user.uid+“/profile.jpg”）；
fileRef.put（文件）；
app.firestore（）.collection（'用户'）
.添加({
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”
})
让imageRef=userData[0]。profileImage
常量imageUrl=（异步（）=>{
让imagePath=wait app.storage（）.ref（）.child（imageRef.getDownloadURL（））
setProfileImage（图像路径）
})()
返回(
轮廓
名字：{userData[0].firstName}
姓氏：{userData[0].lastName}
电子邮件：{userData[0].Email}
公司名称：{userData[0].companyName}
公司

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

尝试使用effect获取所需内容。这将在每次

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)
})

const Profile=（）=>{
const{currentUser}=useContext（AuthContext）；
const[userData，setUserData]=useState（）
常量[profileImage，setProfileImage]=useState（）
const users=app.firestore（）.collection（'用户'）
useffect（（）=>{
使用者
.where（“uid”，“==”，`${currentUser.uid}`）
.get（）
。然后（（快照）=>{
const data=snapshot.docs.map（（doc）=>({
id:doc.id，
…文件数据（）
}))
setUserData（数据）
console.log（数据）
})
}，[userData]）
如果（！userData）{
返回加载。。。
}否则{
让imageRef=userData[0]。profileImage
const imageUrl=async（）=>{
让imagePath=wait app.storage（）.ref（）.child（imageRef.getDownloadURL（））
setProfileImage（图像路径）
}
返回(
轮廓
名字：{userData[0].firstName}
姓氏：{userData[0].lastName}
电子邮件：{userData[0].Email}
公司名称：{userData[0].companyName}
公司域：{userData[0]。公司域}
app.auth（）.signOut（）}>注销
);
}
};

然后将imageUrl放入Firestore调用。我不能，因为我需要我的

让imageRef=userData[0]。profileImage

一开始未定义，因此它不起作用。您应该使用我的代码创建另一个useEffect。在原始代码中，您应该将[userData]替换为[]。您不应该在useEffect中使用setUserData，并且使用useData作为依赖项，这将导致循环。您可以在功能组件中使用多个useEffect。它在第一次映像没有时间存储在firebase存储中时仍然不起作用。我仍然需要重新加载pagefileRef.put（文件）。然后（快照=>{那么你应该把你的代码放在这里}。

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