Tengo el siguiente componente de clase
// Bibliotecas
import React, {Component} from 'react';
import firebase from "firebase/app";
import 'firebase/auth'
import colors from 'colors';
// Componente
import './App.css';
import logo from './logo.svg';
class App extends Component {
constructor() {
super();
this.state = {
user: null
};
// Bind de las funciones
this.handleAuth = this.handleAuth.bind(this);
this.handleLogout = this.handleLogout.bind(this);
}
// Método del ciclo de vída que se lanza una vez el componente ha sido creado o montado
componentDidMount() {
var that = this;
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
that.setState({user: user});
}
}).bind(this);
}
// Iniciar sesión
handleAuth() {
// Proveedores
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(googleAuthProvider)
.then((result) => {
console.log(colors.green(`${result.user.email} ha iniciado sesion`));
}).catch((err) => {
console.log(colors.yellow(`${err.code}`));
});
}
// Cerrar sesión
handleLogout() {
var that = this;
firebase.auth().signOut()
.then(() => {
console.log(colors.green(`${this.state.user.email} ha cerrado sesion`));
that.setState({
user: null
})
});
}
// Cambiar el render si es que el usuario está logueado o no.
renderLoginButton() {
if (this.state.user != null) {
return (
<div>
<img src={this.state.user.photoURL} alt={this.state.user.displayName} height="150px" width="150px"/>
<p>Hola {this.state.user.displayName}</p>
<button onClick={this.handleLogout}>Cerrar sesion</button>
</div>
);
} else {
return (<button onClick={this.handleAuth}>Entrar</button>);
}
}
// Método que renderiza el componente
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo"/>
<p>
Unete y comparte tu contenido
</p>
{this.renderLoginButton()}
</header>
</div>
);
}
}
export default App;
Me funciona todo correctamente y he podido crear un flujo de inico de sesión relativamente sencillo.
El verdadero problema está en el método del ciclo de vida del componente llamado componentDidMount(), en el capturo si el usuario inicio sesión para cambiar el estado user del componente declarado en el constructor y así renderizar sus datos en el componente. El problema es que al intentar setear el estado con el método this.setstate de la siguiente manera
this.setState({
user : user // Yo sé que con ECMA6 puedo simplificar está línea
)};
Obtengo un error en la consola que me dice que this.setState is not a function (no es una función). Leyendo en la comunidad de stackoverflow en inglés encontré una manera de solucionarlo, aparecía que debía bindear el método en el constructor para poder utilizar this. Lo hice como pueden ver pero aún seguía con el problema, ahondando más en el tema encontré otra solución que me decia crear una variable that que guardara this. y luego bindeara la función, de la siguiente manera
componentDidMount() {
var that = this;
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
that.setState({user: user});
}
}).bind(this);
}
Hasta ahí todo bien y me funciona a la perfección, pero no sé supone que si ya "bindie" la función en el constructor podría usar sin problemas this.setState en esta función ¿es esto así?, de no ser posible ¿qué estoy haciendo mal, creo que declarar una variable that para instanciar this es un paso de más, al igual que el bind al final de la función y solo ensucia mi código.