Estoy cargando una imagen de perfil de usuario en el almacenamiento de Firebase, luego actualizo el valor photoURL del usuario de autenticación con updateProfile() . Después de eso, quiero que el usuario se actualice sin actualizar manualmente la página. He estado intentando esto durante días y el problema se vuelve más extraño cada vez que intento depurarlo.
Lo interesante es que el objeto de usuario parece estar ya actualizado cuando lo registro con console.log(currentUser) después de que then cumpla la promesa de updateProfile() . Entonces, la nueva photoURL ya está presente en el objeto currentUser . Pero parece que no llama a una actualización de estado o console.log("!!!!currentAuthUserUpdate", user); . Entonces la imagen del usuario no se actualizaría en mi página.
Incluso lo probé haciendo un useEffect con el usuario actual como una dependencia, pero no se disparó. Aún así, el objeto currentUser cambió al iniciar sesión después de updateProfile()
Actualización del perfil, UpdateUserImage.tsx :
import { useAuth } from "../../contexts/AuthContext"; const { currentUser } = useAuth(); // updating the user profile updateProfile(currentUser, { photoURL })AuthContext.tsx :
import { auth } from "./../firebase/firebase"; const [currentUser, setCurrentUser] = useState(null); const auth = getAuth(app); useEffect(() => { const unsubscribe = auth.onAuthStateChanged((user) => { console.log("!!!!currentAuthUserUpdate", user); // I tried setting the user as a custom new object: const userData = { ...user }; setCurrentUser(user); }); return unsubscribe; }, []);base de fuego.js
import { getAuth } from "firebase/auth"; // Initialize Firebase const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth };Lo que probé adicionalmente: (pero esto no funcionaría ya que el usuario ya está actualizado sin una actualización de estado de reaccionar, por lo que está tratando de reemplazar el mismo objeto)
const reloadUser = async () => { try { const res = await currentUser.reload(); const user = auth.currentUser; console.log("currentUser:", user); setCurrentUser(auth.currentUser); console.log("res", res); } catch (err) { console.log(err); } };no es auth.onAuthStateChanged . Debe importar onAuthStateChanged desde 'firebase/auth'
import { getAuth, onAuthStateChanged } from "firebase/auth" const auth = getAuth(); // leave getAuth empty if you only have one appEntonces en tu useEffect debería ser
onAuthStateChanged(auth, async (currentUser) => { ... }La función setCurrentUser devuelta por useState no siempre es la misma función en mi experiencia.
Puede intentar pasarlo como una dependencia al useEffect , pero no creo que eso sea lo que quiere.
React te permite usar un setter useState antiguo si le das una función de actualización, en lugar de un valor: setCurrentUser(()=>auth.currentUser)
Sin embargo, los documentos de React lo disputan.
El uso de useStates es bueno para volver a renderizar componentes. Sin embargo, utilizar useRefs es mejor para actualizar la variable real y no provocará una nueva representación del componente.
Declararlo como: const currentUser = useRef(null)
Actualícelo como: currentUser.current = updatedUserData
Usar en código como: currentUser.current.photoURL