Maison >interface Web >js tutoriel >Pourquoi React génère-t-il une erreur « Impossible de lire la propriété « setState » non définie » ?

Pourquoi React génère-t-il une erreur « Impossible de lire la propriété « setState » non définie » ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-05 06:28:01453parcourir

Why Does React Throw a

Comprendre l'erreur « Impossible de lire la propriété 'setState' de non définie » dans React

Lorsque vous travaillez avec des composants React, vous pouvez rencontrer l'erreur « Impossible de lire la propriété 'setState' d'erreur "indéfinie". Ce problème survient lorsque vous tentez d'accéder à la méthode setState dans une méthode d'un composant React, mais que la méthode n'a pas été correctement liée à l'instance du composant.

Résoudre le problème de liaison

Dans le document fourni Par exemple, cette erreur se produit dans la méthode delta(). La raison en est que this.delta n'est pas lié à l'instance du composant Counter. Pour résoudre ce problème, utilisez le code suivant dans le constructeur :

<code class="javascript">this.delta = this.delta.bind(this);</code>

La liaison de la méthode delta à l'instance du composant garantit qu'elle a accès au contexte this du composant, ce qui lui permet d'accéder à la méthode setState et l'état du composant.

Code mis à jour

La version corrigée du code devrait ressembler à ceci :

<code class="javascript">class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1,
        };

        this.delta = this.delta.bind(this); // Bind 'delta' to the component instance
    }

    delta() {
        this.setState({
            count: this.state.count++,
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}</code>

En liant la méthode delta, vous résolvez avec succès le " Impossible de lire la propriété 'setState' de l'erreur non définie" et permettre au composant d'incrémenter le nombre 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!

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