React - setState(…) Can only update

Question

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.

i dont know why it happends this is the code:

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

Dashboard.js (redirect this page when loggedIn is true);

import React, { Component } from 'react';

import Header from '../../components/Template/Header/Header.js';
import PanelUsers from '../../components/Template/Users/PanelUsers.js';
import CardGroup from '../../components/Dashboard/Cards/CardGroup.js';
import CardDecks from '../../components/Dashboard/DetailCard/CardDecks.js';

import store from '../../store';
import { Dashboard } from '../../db';

export default class LogIn extends Component {
  constructor() {
    Dashboard();
    super();
    this.state = {
      dataState: []
    };
  }
  componentDidMount(){
    store.subscribe(()=>{
      this.setState({
        dataState: store.getState().dataDashboardReducer.data
      });
    });
  }
  componentWillUnmount(){
    console.log("componente desmontado Dashboard");
  }
  render(){
    return(
      <div>
      <Header />
        <div className="row">
          <div className="col-sm-2">
            <PanelUsers/>
          </div>
          <div className="col-sm-6" >
            <CardGroup datos= { this.state.dataState }/>
          </div>
          <div className="col-sm-4">
            <CardDecks/>
          </div>
        </div>

      </div>
    );
  }
}

when i go to another page and i go back to LogIn it happends

Answer 1

It happens because you try to set state in componentWillMount(), while component is not mounted yet. Change it to componentDidMount() and it should work fine.