0

tengo un problema con setState function, este es el problema:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the LogIn component.

esto me pasa cuando intento volver a levantar un componente de nuevo pero no se como evitar este problema asi tengo el coigo:

LogIn.js (the initial page);

import React, { Component } from 'react';
import firebase from 'firebase';
import { Redirect } from 'react-router-dom';
export default class LogIn extends Component {
  constructor(props) {
    super(props);

      this.state = {
       loggedIn : false
     };
  }

  handleAuth(){
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
    let auth = firebase.auth();
    let promise = auth.signInWithEmailAndPassword(email, password);
    promise.then(result=>{
      console.log(result.email);
    });
    promise.catch(error=> {
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log(errorCode);
      alert(errorMessage);
    });
  }
componentDidMount(){
      firebase.auth().onAuthStateChanged(firebaseUser =>{
      console.log(firebaseUser.email);
      if (firebaseUser.email) {
        this.setState({
          loggedIn: true
        });
      }
      else{
        alert("No logeado");
      }
    });
}
  render(){
    if (this.state.loggedIn) {
      return ( <Redirect to="/Dashboard"/> );
    }
    return(
      <div className="container comunidadLogIn">
        <div className="row" >
          <div className="col-sm-2 push-5 align-self-center" >
           <input type="text" name="email" id="email" placeholder="Email"/>
          </div>
        </div>

        <div className="row" >
          <div className="col-sm-2 push-5 align-self-center" >
           <input type="password" name="password" id="password" placeholder="Password"/>
          </div>
        </div>
          <div className="row" >
          <div className="col-sm-2 push-5 align-self-center" >
           <button className="btn btn-secondary" onClick={this.handleAuth} id="btnLogin">Iniciar sesión</button>
          </div>
        </div>
      </div>
    );
  }
}

cuando intento volver a LogIn.js me tira el error lo mismo me pasa en otras paginas

1
  • posiblemente este pasando por que el login se vuelve a montar, osea se esta ejecutando el componentDidMount() cuando vuelves.
    – wootsbot
    Commented el 7 ago. 2017 a las 23:28

1 respuesta 1

0

Bien te dejo aqui una posible solución que un miembro de la comunidad en inglés, propuso para tu mismo problema.

En el componentDidMount() registrar un callback, cuando el componente es desmontado debes desregistrarlo creo que ese es el motivo del warning, simplemente deberías añadir:

componentWillUnmount() {
  // Unsubscribe.
  this.auth();
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.