así que aquí quiero almacenar la URL de la imagen del almacenamiento de firebase en firestore. Recibo un error de indefinido porque mi setImgUrl no está definido. Por favor ayúdame a solucionar esto.
import React, { useState } from "react"; import "../mainTab.css"; import "./addScreen.css"; import firebase, { storage } from "../firebase"; const AddScreen = () => { const db = firebase.firestore(); const [cat, setCat] = useState(); const [course, setCourse] = useState(); const [name, setName] = useState(); const [price, setPrice] = useState(); const [descrip, setDescrip] = useState(); const [image, setImage] = useState(); const [imgURL, setImgURL] = useState(); const onSubmitHandler = (event) => { event.preventDefault(); const ref = storage.ref(`/images/${image.name}`); const uploadTask = ref.put(image); uploadTask.on("state_changed", console.log, console.error, () => { ref.getDownloadURL().then((url) => { setImage(null); setImgURL(url); console.log(imgURL); }); }); const data = { name: name, price: price, cat: cat, course: course, decription: descrip, image: imgURL, }; db.collection("menu") .doc(course.toString()) .collection(name.toString()) .add(data) .then(() => alert("menu item is posted")) .catch((error) => alert("error: " + error)); setName(""); setPrice(""); setCat(""); setCourse(""); setImage(""); setDescrip(""); };Necesito la URL de img en el enlace setImg. Entonces, ¿hay alguna forma de que después de completar la carga deba llamar a la función de escritura de la base de datos (intento con un gancho de bandera (falso) que no ayudó? por la imagen se carga perfectamente bien en el almacenamiento de Firebase
intente poner esta parte dentro de una función y luego llame a esa función dentro de 'entonces', por ejemplo
const putUrl = ()=>{ db.collection("menu") .doc(course.toString()) .collection(name.toString()) .add(data) .then(() => alert("menu item is posted")) .catch((error) => alert("error: " + error)); setName(""); setPrice(""); setCat(""); setCourse(""); setImage(""); setDescrip(""); }y ahora llame a putUrl en 'then()' de esta manera, esta parte del código se ejecutará solo después de que se obtenga 'imgUrl'. Obtuvo un error porque obtener 'imgUrl' y agregar datos son asincrónicos y se ejecutarán antes de que se obtenga 'imgUrl'
Cualquier código que necesite la URL de descarga de Firebase, debe estar dentro de la devolución de llamada then ser llamado desde allí o sincronizado para ejecutarse una vez que imgURL esté configurado de alguna otra manera.
La forma más sencilla de corregir su código es mover el código que then escribe en Firestore al bloque de esta manera:
const ref = storage.ref(`/images/${image.name}`); const uploadTask = ref.put(image); uploadTask.on("state_changed", console.log, console.error, () => { ref.getDownloadURL().then((url) => { setImage(null); setImgURL(url); console.log(imgURL); const data = { name: name, price: price, cat: cat, course: course, decription: descrip, image: url, // 👈 Use url here, as imgURL won't be set yet }; db.collection("menu") .doc(course.toString()) .collection(name.toString()) .add(data) .then(() => alert("menu item is posted")) .catch((error) => alert("error: " + error)); }); });