He estado tratando de descubrir cómo actualizar la foto del usuario después de subirla a Google Firebase. La foto del usuario se carga en Firebase, sin embargo, no se cambia después de cargarla. Solo cambia cuando se actualiza la página.
¿Hay alguna forma de actualizar la foto de perfil de usuario sin actualizar toda la página?
import { useEffect, useState } from "react"; import { useAuth, upload } from "./firebase"; export default function Profile() { const currentUser = useAuth(); const [photo, setPhoto] = useState(null); const [loading, setLoading] = useState(false); const [photoURL, setPhotoURL] = useState("https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png"); function handleChange(e) { if (e.target.files[0]) { setPhoto(e.target.files[0]) } } function handleClick() { upload(photo, currentUser, setLoading); } useEffect(() => { if (currentUser?.photoURL) { setPhotoURL(currentUser.photoURL); } }, [currentUser]) return ( <div className="fields"> <input type="file" onChange={handleChange} /> <button disabled={loading || !photo} onClick={handleClick}>Upload</button> <img src={photoURL} alt="Avatar" className="avatar" /> </div> );El código está tomado de la página de LogicismX GitHub.
No estoy muy seguro de lo que hace la función upload (), deberías incluirla, pero de todos modos:
Leer los documentos podría ayudar, como verá allí, después de la inicialización de la aplicación, desea exportar la base de datos de firestore como tal
const app = initialiseApp(firebaseConfig) export const db = getFirestore(app)Luego, en su archivo donde está tratando de renderizar la imagen, debe cambiar su función de "lectura" a onSnapshot (), esto se ejecutará cada vez que haya un cambio en dicho documento en la base de datos, solo volviendo a renderizar las variables con estado estás dando cambio por disparo
aquí hay un ejemplo:
import {onSnapshot, doc} from 'firebase/firestore' import { db } from './firebaseConfig' ... onSnapshot(doc(db, '<your-collection-name>', '<your-doc-name>', (snapshot) => { setPhotoUrl(snapshot.data().photoURL) }