SetState de React dans le onAuthStateChanged de Firebase Auth, ce qui rend setState indéfini.

Question

//Pourquoi cette question n'est pas un doublon de ( Comment accéder au bon `this` dans un callback ? ) : ma question est spécifique à une réaction et les visiteurs pourraient ne pas faire mentalement le lien entre le problème soulevé dans le lien ci-dessus et ce qui me préoccupe.

J'essaie de stocker les données utilisateur renvoyées par la fonction onAuthStateChanged de Firebase auth et de stocker ces données dans un état pour les utiliser dans mon application react. Dans mon application, j'ai le listener ci-dessous :

  componentDidMount() {

    firebase.auth().onAuthStateChanged(function(user) {

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        this.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}

Mais je reçois l'erreur "TypeError : this.setState is not a function". J'ai essayé de lier "this" à componentDidMount, sans succès.

Answer 1

Comme l'a dit @Jason Byrne, il semble que ce soit un problème de spécifier qui est "ceci" et vous pouvez suivre l'approche qu'il a mentionnée dans sa réponse.

Une autre approche moderne consiste à utiliser l'ES6 fonctions de la flèche comme ils travaillent dans lexical scope donc this est déterminée en fonction de "l'endroit" où elle est écrite (qui est votre class ) :

componentDidMount() {

    firebase.auth().onAuthStateChanged(user => {

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        this.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}

Jetez également un coup d'œil ici : Comment accéder au bon `this` dans un callback ?

Answer 2

"this" en JavaScript peut être un peu difficile, vous devez être sûr de savoir à quoi "this" fait référence. Parce que le "this" est à l'intérieur de la "function(user)", il est relatif à cette fonction... et non à votre application dans son ensemble. Il faudrait que je voie l'ensemble de votre code pour en être sûr, mais vous pouvez faire quelque chose comme ceci pour conserver une référence de votre application et l'utiliser à la place.

 let myApp = this;

 componentDidMount() {

    firebase.auth().onAuthStateChanged(function(user) {

      var theUser;

      if (user) {
        console.log("user is logged in!");

        theUser = user;

        myApp.setState({
          session: theUser
        });
        // User is signed in.
      } else {
        // No user is signed in.
        console.log("user is not logged in!")
        theUser = null;
      }
  }
}