React - setState () This usually means you called setState () on an unmounted component

0

I have a problem with setState function, this is the problem:

  

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.

This happens to me when I try to raise a component again but I do not know how to avoid this problem so I have the problem:

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>
    );
  }
}

When I try to go back to LogIn.js I get the error, the same thing happens to me in other pages

    
asked by Lias 01.08.2017 в 22:39
source

1 answer

0

Well I'll let you here possible solution that a member of the community in English, proposed for your same problem.

In the componentDidMount () register a callback, when the component is dismounted you must deregister it I think that is the reason for the warning, you should simply add:

componentWillUnmount() {
  // Unsubscribe.
  this.auth();
}
    
answered by 21.08.2017 в 21:41