• Empleos
  • Sobre nosotros
  • Empleos
    • Inicio
    • Empleos
    • Cursos y retos
  • Empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

231
Vistas
Cómo exportar un objeto global en React js

Estoy tratando de almacenar el correo electrónico del usuario una vez que haya iniciado sesión correctamente.

Para esto,

  • Creó un archivo logged_user.js
  • Creó una clase LoggedUser y una única instancia de la misma denominada loggedUser .
  • loggedUser exportado.

Supuse que donde sea que vaya a importar logged_user.js , solo obtendré esa única instancia. Pero en realidad, estoy recibiendo una nueva instancia.

<usuario_registrado.js>

 class LoggedUser{ #email; #userExist; constructor(){ this.#email = null; this.#userExist = false; } setUser(email){ this.#email = email; this.#userExist = true; } resetUser(){ this.#email = null; this.#userExist = true; } get userExist(){ return this.#userExist; } get email(){ return this.#email; } } const loggedUser = new LoggedUser(); export default loggedUser;

Función de manejo de inicio de sesión

 async handleSingIn() { this.clearAlert(); this.setState({ loading: true }); if (this.validateEmailAndPassword()) { await signIn(this.state.emailInput, this.state.passwordInput) .then(() => { this.setState({ loading: false }); this.showAlert("Signed In.", false); loggedUser.setUser(this.state.emailInput); window.location.href = "/adminPanel"; }) .catch((error) => { this.setState({ loading: false }); switch (error.code) { case "auth/invalid-email": this.showAlert("Invalid email!"); break; case "auth/wrong-password": this.showAlert("Wrong password!"); break; case "auth/user-not-found": this.showAlert("User not found!"); break; default: alert(error.message); this.showAlert("Something went wrong!"); } }); } else { this.setState({ loading: false }); } }

Una vez que el usuario inició sesión, la ruta cambia de la página de inicio de sesión a la página de administración. Allí estoy tratando de obtener acceso a ese correo electrónico, pero resulta ser null .

 async componentDidMount(){ const collegeName = await await getCollegeName(loggedUser.email); this.setState({collegeName: collegeName}) }

Quiero que solo se importe una sola instancia de LoggedUser en todos los archivos.

over 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

loggedUser en realidad se exportó una vez. Según el estándar ECMA 2015, la export es una operación idempotente. El problema real aquí es la pérdida de this . La forma más sencilla de arreglarlo es usar funciones de flecha para métodos de clase:

 class LoggedUser{ #email; #userExist; constructor(){ this.#email = null; this.#userExist = false; } setUser = (email) => { this.#email = email; this.#userExist = true; } resetUser = () => { this.#email = null; this.#userExist = true; } get userExist(){ return this.#userExist; } get email(){ return this.#email; } } const loggedUser = new LoggedUser(); export default loggedUser;

Este es un mecanismo JS genérico que no tiene nada que ver con React

over 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda