Javascript Girl
  1. Javascript Girl
  3. Connexion Firebase avec des composants réactifs
Intereting Posts
Protractor donne l'erreur "Impossible de démarrer une session WebDriver" Pourquoi dois-je utiliser document.write au lieu des méthodes de manipulation DOM? Comment enregistrer la variable entre les pages jQM? Limitation de la gamme de listes déroulantes Hauteur d'une div pour correspondre à la hauteur de la fenêtre Contenu statique Express gzip NodeJS unsafe-perm ne fonctionne pas sur package.json Lien d'événement sur des éléments créés dynamiquement? Les avantages de l'héritage prototypique par rapport au classique? L'architecture à Facebook-chat à partir d'une page Web, (XMPP? Strophe? Punjab?) Politique de sécurité de contenu dans l'application Chrome Utilisation de Javascript dans CSS HTML5 Lien vers le fichier PNG Couleur du texte dans une alerte Javascript Existe-t-il un moyen d'ajouter / supprimer plusieurs classes dans une seule instruction avec classList?

Connexion Firebase avec des composants réactifs

L'idée de base est de créer une connexion Firebase en réact.

Les composants se transmettent, mais ils ne fonctionnent pas ensemble. Le problème principal est que la fonction de rendu ne prend pas les états «nouveaux», après que la méthode onAuthStateChanged () est appelée. Qu'est-ce que je fais mal?

Merci beaucoup les gars! 

var Login = React.createClass ({ getInitialState: function(){ return { loggedIn: 'false' }; }, handleLogIn: function(event){ var email = document.getElementById('email').value; var password = document.getElementById('password').value; firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { // ERROR HANDLING var errorCode = error.code; var errorMessage = error.message; // [... error handling ...] }); this.setState({ loggedIn: 'true' }); }, authenticateUser: function(x){ // INITIALIZATION var config = { [ ... config stuff ... ] }; firebase.initializeApp(config); //CHECKING IF SIGNED IN firebase.auth().onAuthStateChanged(function(user) { if (user) { // USER IS SIGNED IN console.log('authenticateUser(): true'); this.setState({ loggedIn: 'true' }); } else { // USER IS SIGNED OUT console.log('authenticateUser(): false'); this.setState({ loggedIn: 'false' }); } }); }, whichWindowToShow: function() { if (this.state.loggedIn === 'unknown'){ return ( <div> <Loading type='bubbles' color='#e3e3e3' /> </div> ); } else if (this.state.loggedIn === 'true'){ return ( <div> <Backend /> </div> ); } else { return ( <div className="login_wrapper"> <div className="login_box"> <h1>Member Login</h1> <div className="login_fields"> <input type="text" id="email" name="email" placeholder="mail"/> <input type="password" id="password" name="password" placeholder="password"/> <button id="signin" name="signin" onClick={this.handleLogIn}>Login</button> </div> </div> </div> ); } }, render: function() { this.authenticateUser(); return ( <div> { this.whichWindowToShow() } </div> ); } }); // END LOGIN

Pour tous avec le même problème / challenge,

C'est la SOLUTION FINALE FINALE 🙏🏼👑 (.bind (this) fait le travail).

Doit également être appliqué sur tous les autres auditeurs Firebase (.on ("valeur") par exemple) 

 firebase.auth().onAuthStateChanged(function(user) { if (user) { this.setState({ loggedIn: "true" }); } else { this.setState({ loggedIn: "false" }); } }.bind(this));