Maison > interface Web > js tutoriel > Comment résoudre l'erreur « this.setState n'est pas une fonction » dans React lors de la liaison des fonctions de rappel ?

Comment résoudre l'erreur « this.setState n'est pas une fonction » dans React lors de la liaison des fonctions de rappel ?

Mary-Kate Olsen
Libérer: 2024-10-24 05:03:30
original
1050 Les gens l'ont consulté

How to Resolve

Erreur : "this.setState n'est pas une fonction" dans React

Cette erreur se produit généralement lorsque vous essayez d'accéder à this.setState dans une fonction de rappel qui n'est pas liée à le bon contexte. Dans React, cela fait référence à l'instance du composant, et il est essentiel de maintenir le contexte approprié pour accéder à ses méthodes comme setState.

Dans l'extrait de code donné, le problème se pose dans la fonction de rappel de l'appel de l'API VK :

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);
    }
});
Copier après la connexion

La fonction de rappel est définie dans une portée différente, et cela ne fait pas référence à l'instance du composant. Pour résoudre ce problème, il est nécessaire de lier la fonction de rappel au bon contexte :

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));
Copier après la connexion

En liant la fonction de rappel à celui-ci, nous nous assurons que this fait référence à l'instance du composant dans le rappel, ce qui nous permet de accédez à this.setState.

Dans certains cas, il peut être nécessaire de lier à la fois les appels d'initiation et d'API :

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');
Copier après la connexion

Cela garantit que this fait référence à l'instance du composant tout au long du processus , y compris l'initiation et les appels API.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal