Pourquoi ne puis-je pas accéder à « setState » dans mon composant React ?

Erreur de type non interceptée : impossible d'accéder à la propriété 'setState' dans React

Lorsque vous travaillez avec React, vous pouvez rencontrer l'erreur "Erreur de type non interceptée : impossible lire la propriété 'setState' de non défini." Ce problème se produit lors de la tentative d'accès à la méthode 'setState' d'un composant qui n'est pas correctement lié.

La méthode 'setState' est utilisée pour mettre à jour l'état d'un composant React. Lors de la définition d'un composant, ses méthodes doivent être liées à l'instance du composant pour garantir que « ceci » fait référence à la portée correcte. Cette erreur survient souvent lorsque la méthode du composant est appelée en dehors du constructeur sans être explicitement liée.

Exemple :

Considérez l'extrait de code suivant :

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

        this.state = {
            count : 1
        };

        this.delta.bind(this); // Binding delta incorrectly
    }

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

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

Dans cet exemple, la méthode 'delta' n'est pas liée au composant dans le constructeur. Par conséquent, lorsque 'delta' est appelé, 'this' ne fait pas référence à l'instance du composant et l'erreur se produit car 'setState' n'est pas accessible à partir de 'undefined'.

Solution :

Pour résoudre ce problème, il est nécessaire de lier correctement la méthode 'delta' au composant dans le constructeur :

<code class="javascript">constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this); // Correctly binding delta
}</code>

En définissant 'this.delta = this.delta .bind(this)', vous attribuez la fonction liée à 'this.delta'. Cela garantit que lorsque « delta » est appelé, « this » fait référence à l'instance du composant, permettant l'accès à la méthode « setState ».

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!