Comment corriger l'erreur « this.setState n'est pas une fonction » dans React ?

Erreur React this.setState : comprendre le problème

Lorsque vous essayez de manipuler l'état dans un composant React, il est crucial de comprendre le concept de contraignant et sa signification. Une erreur courante qui se produit est l'exception "this.setState n'est pas une fonction".

Le problème

L'extrait de code fourni présente un composant qui vise à récupérer l'utilisateur données provenant d'une API tierce utilisant la bibliothèque VK. Cependant, lorsque vous tentez de gérer la réponse de l'API, l'erreur « this.setState n'est pas une fonction » apparaît. Cette erreur indique que la méthode this.setState n'est pas disponible dans le contexte spécifié.

La résolution

La solution réside dans la compréhension du contexte dans lequel la fonction de rappel est exécuté. Lors de l'appel de la méthode de l'API, un nouveau contexte est créé. Pour accéder à cette instance et éviter l'erreur susmentionnée, il est nécessaire de lier la fonction de rappel à l'instance du composant.

Dans ce scénario particulier, l'instance this doit être liée à la fois au VK.init et Appels VK.api. Ce faisant, nous garantissons que les fonctions de rappel ont accès à l'instance this du composant, qui inclut la méthode de manipulation d'état setState.

Liaison pour les appels Init et API

Pour résoudre le problème, le code doit être modifié comme suit :

VK.init(function() {
    console.info("API initialization successful");
    VK.api('users.get',{fields: 'photo_50'},function(data) {
        if (data.response) {
            this.setState({ // Error is prevented with binding
                FirstName: data.response[0].first_name
            });
            console.info(this.state.FirstName);
        }
    }.bind(this));
}.bind(this), function() {
    console.info("API initialization failed");
}, '5.34');

Conclusion

En liant les fonctions de rappel à l'instance du composant, nous établissons les contexte pour accéder à this.setState dans les fonctions de rappel. Cela nous permet de manipuler l'état du composant en douceur et de gérer la réponse de l'API comme prévu.

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!