0

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.

1 respuesta 1

2

Está haciendo .bind a la función onAuthStateChanged de firebase.

Debería ser de la siguiente manera:

firebase.auth().onAuthStateChanged((function (user) {
  if (user) {
    that.setState({user: user});
  }
}).bind(this));

Para evitar hacer el .bind puedes usar las funciones flecha que se introdujeron en ES6 y que no crean un contexto(this) cuando se ejecutan sino que hacen referencia a la clase(más bien al objeto que se instancia con el new) en la que están declarados o al objeto global (window o gloabl en nodejs).

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    this.setState({user: user});
  }
});

Tu Respuesta

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

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