Pourquoi la fonction « this.setState » de React n'est-elle pas disponible dans le rappel ComponentDidMount ?

"Réagir à this.setState n'est pas une fonction" Problème : liaison contextuelle

Lors de la tentative de développement d'une application à l'aide d'une API tierce , une erreur courante rencontrée est "TypeError : this.setState n'est pas une fonction." Cela se produit lorsque vous tentez de gérer les réponses de l'API. Le problème provient généralement d'une liaison incorrecte.

Le code React fourni définit un composant appelé AppMain avec une méthode composantDidMount. Dans cette méthode, un appel API VK est effectué pour récupérer les informations utilisateur. Dans la fonction de rappel de la réponse API, une tentative est effectuée pour utiliser this.setState pour mettre à jour l'état du composant. Cependant, l'erreur se produit car la fonction de rappel est exécutée dans un contexte différent et n'a pas accès à this.setState.

Solution :

Pour résoudre ce problème, la fonction de rappel doit être liée au contexte correct. Ceci peut être réalisé en utilisant la méthode .bind :

VK.api('users.get', { fields: 'photo_50' }, function(data) {
  if (data.response) {
    this.setState({ // the error happens here
      FirstName: data.response[0].first_name
    });
    console.info(this.state.FirstName);
  }
}.bind(this));

En liant la fonction de rappel à l'instance du composant, le mot-clé this dans la fonction de rappel fera référence à l'instance du composant, permettant l'accès à ses méthodes et propriétés, y compris this.setState.

Liaison supplémentaire :

Dans certains cas, une liaison supplémentaire peut être nécessaire. Par exemple, si la méthode d'initialisation VK est également appelée dans composantDidMount, cette méthode doit également être liée à l'instance du composant :

VK.init(function() {
  console.info("API initialisation successful");
  VK.api('users.get', { fields: 'photo_50' }, function(data) {
    if (data.response) {
      this.setState({ // the error happens here
        FirstName: data.response[0].first_name
      });
      console.info(this.state.FirstName);
    }
  }.bind(this));
}.bind(this), function() {
  console.info("API initialisation failed");
}, '5.34');

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!