Блог

Главная - Вопросы по программированию - Firebase getDownloadUrl не работает сначала, я пытаюсь перезагрузить страницу

Firebase getDownloadUrl не работает сначала, я пытаюсь перезагрузить страницу

#javascript #reactjs #firebase #google-cloud-firestore #firebase-storage

# #javascript #reactjs #firebase #google-облако-firestore #firebase-хранилище

Вопрос:

Когда я пытаюсь отобразить свое изображение с URL-адресом изображения, я получаю сообщение об ошибке 404 not found, а затем, когда я перезагружаю страницу, появляется изображение. Я знаю, что это из-за того, что изображение не успевает сначала загрузить, но я не знаю, как решить эту проблему. Если у вас есть какие-либо идеи, это код :

Сначала я создаю пользователя и создаю ссылку для своего изображения, затем помещаю свою ссылку в свою базу данных, затем я получаю свои данные на странице своего профиля и использую метод getDownloadUrl, чтобы получить 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

Ответ №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)
})

Комментарии:

1. затем поместите вызов ImageUrl Firestore.

2. Я не могу, потому что мне нужен мой let imageRef = userData[0].profileImage , который сначала не определен, поэтому он не работает

3. Вы должны создать другой эффект использования, используя мой код. В вашем исходном коде вы должны заменить [userData] на [] . Вы не должны использовать setUserData в useEffect и использовать useData в качестве зависимости, это вызовет цикл. У вас может быть эффект многократного использования в функциональном компоненте.

4. Он по-прежнему не работает в первый раз, когда изображение не успевает сохраниться в моем хранилище firebase, мне все еще нужно перезагрузить страницу

5. fileRef.put(file).then(snapshot => { тогда вы должны поместить здесь свои коды}.

Ответ №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>
      </>
    );
  }
};
Метки: