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
Mary-Kate Olsenoriginal
2024-10-24 05:03:30975parcourir

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);
    }
});

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));

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');

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:
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