Llamo a la función dentro de useEffect. Esto significa que la función no se llama repetidamente, pero por alguna razón parece que los datos se eliminan después de un breve período de tiempo.
const [following, setFollowing] = useState([]) useEffect(() => { getUser() getFollowing() }, []);La función aquí busca todos los usuarios que el usuario actual está siguiendo actualmente. Parece funcionar bien y la consola que registra la matriz del seguidor devuelve los usuarios que se esperan y parecen mostrarse en la pantalla.
async function getFollowing() { const followerRef = query(collection(db, "followers"), where("follower", "==", auth.currentUser.uid)); const querySnapshot = await getDocs(followerRef); let followerArray = [] querySnapshot.forEach((doc) => { const storageRef = ref(storage, (doc.data().followingEmail) + "/pp"); getDownloadURL(storageRef).then((url) => { followerArray.push([doc.data().followingEmail, url, doc.data().following]); }).catch((error) => { followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]); // setFollowing(followerArray) }); }); console.log("follower array"); console.log(followerArray); setFollowing(followerArray) // console.log(following) }Esto es lo que estoy usando para recorrer todos los elementos. Los elementos aparecen en orden y con el formato correcto en la página, pero una vez que se han cargado, de alguna manera desaparecen. No estoy seguro de qué está causando esto. Tal vez debería hacer que la página espere hasta que los datos se hayan cargado desde firebase. Tal vez debería tener alguna declaración condicional que evite que los datos desaparezcan.
{following.map((f) => <Row key={f[2]} className="hover"> <Col xs={2}> <div className=""> <img src={f[1]} className="smallPhoto" /> </div> </Col> <Col xs={10}className=""> <p className= "followText">{f[0]}</p> </Col> </Row> )}así es como se ve la salida para mí al actualizar la página https://giphy.com/gifs/uDtDpY198yCRn6S2CW
He probado muchas soluciones, pero ninguna de ellas parece funcionar.
está lanzando promesas dentro de foreach y configurando una matriz vacía en el estado, debe esperar a que las promesas tengan algo dentro de la matriz
//this fn should be in another file. async function getFollowing() { const followerRef = query(coll(db, "followers"), where(...)); const querySnapshot = await getDocs(followerRef); let followerArray = []; const promises = querySnapshot.map((doc) => { const storageRef = ref(storage, `${followingEmail}/pp`); // this part is hurting my eyes, xD // why you are adding [] instead of {} into the array? return getDownloadURL(storageRef) .then((url) => followerArray.push([fields])) .catch((error) => followerArray.push([fields])); }); }); await Promise.all(promises); console.log("follower array", followerArray); return followerArray; } //inside your component const YourComponent = () => { const [following, setFollowing] = useState([]); useEffect(() => { getUser(); getFollowing().then(array => setFollowing(array)); }, []); };Muchas gracias por el apoyo. El programa parece estar funcionando según lo previsto ahora. Creo que el cambio en useEffect marcó una diferencia clave. Así es como se ve mi código ahora:
}, []); useEffect(() => { getUser() getFollowing().then(array => setFollowing(array)); getFollowers() }, []);Cambios en la función getFollowing que ayudaron a resolver el problema
let getFollowing = async () => { const followerRef = query(collection(db, "followers"), where("follower", "==", JSON.parse(localStorage.getItem("userID")))); let followerArray = []; await getDocs(followerRef).then((querySnapshot) =>{ querySnapshot.forEach((doc) => { const storageRef = ref(storage, (doc.data().followingEmail) + "/pp"); getDownloadURL(storageRef) .then((url) => { followerArray.push([doc.data().followingEmail, url, doc.data().following]); }) .catch((error) => {followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]); }); }) } ) console.log("followerArray", followerArray) return followerArray; }