Блог

Я новичок в реагировании на родной язык и все еще учусь на практике. Я загрузил изображения в firebase, которые я хочу показать на втором экране. Хотя я продолжаю получать такие ошибки, как

 can't find variable: profileImageUrl 
 

Я пытаюсь восстановить изображение на следующей странице.

Вот код для загрузки в firebase:

 const uploadImage = async () => {
  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.oneerror = function () {
      reject(new TypeError('Network request failed'));
    };
    xhr.responseType = 'blob';
    xhr.open('GET', image, true);
    xhr.send(null);
  });

  const ref = firebase.storage().ref().child('/ankit/');

  const snapshot = ref.put(blob);

  snapshot.on(
    firebase.storage.TaskEvent.STATE_CHANGED,
    () => {
      setUploading(true);
    },

    (error) => {
      setUploading(false);
      console.log(error);
      blob.close();
    },
    () => {
      snapshot.snapshot.ref.getDownloadURL().then((url) => {
        setUploading(false);
        console.log('downlaod url', url);
        return url;
      });
    }
  );
};
 

А вот код для извлечения:

 const [Image, setImage] = useState(false);

let imageRef = firebase.storage().ref('/ankit/');
imageRef
  .getDownloadURL()
  .then((url) => {
    setImage({ profileimageUrl: 'url' });
  })
  .catch((e) => console.log('getting downloadURL of image error => ', e));

return (
  <View>
    <Image source={this.state.profileImageUrl}></Image>
  </View>
)
 

Вам следует провести рефакторинг кода, отображающего изображение. Вы используете новое состояние крючков для хранения состояния, но пытаетесь использовать его в html синтаксисе старого синтаксиса состояния реакции. Вот как это должно быть:

 const [image, setImage] = useState(false);

useEffect(() => {
  let imageRef = firebase.storage().ref('/ankit/');
  imageRef
    .getDownloadURL()
    .then((url) => {
      setImage(url);
    })
    .catch((e) => console.log('getting downloadURL of image error => ', e));
},[])

return (
  <View>
    <Image src={image}></Image>
  </View>
);