React - TypeError non capturé: impossible de lire la propriété 'setState' de undefined

Je reçois l'erreur suivante

TypeError non capturé: impossible de lire la propriété «setState» de non défini

même après liaison delta dans le constructeur.

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

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

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

Cela est dû au fait de this.deltane pas y être lié this.

Afin de lier l'ensemble this.delta = this.delta.bind(this)dans le constructeur:

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

Actuellement, vous appelez bind. Mais bind renvoie une fonction liée. Vous devez définir la fonction sur sa valeur liée.

Dans ES7 + (ES2016), vous pouvez utiliser l' opérateur de syntaxe de liaison de la fonction expérimentale ::pour effectuer la liaison. C'est un sucre syntaxique et fera la même chose que la réponse de Davin Tryon.

Vous pouvez ensuite réécrire this.delta = this.delta.bind(this);dansthis.delta = ::this.delta;

Pour ES6 + (ES2015), vous pouvez également utiliser la fonction de flèche ES6 + ( =>) pour pouvoir l'utiliser this.

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

Pourquoi ? Du document Mozilla:

Jusqu'à ce que les fonctions de direction, chaque nouvelle fonction définie par son propre cette valeur [...]. Cela s'est avéré ennuyeux avec un style de programmation orienté objet.

Les fonctions fléchées capturent cette valeur du contexte englobant [...]

Il existe une différence de contexte entre les classes ES5 et ES6. Il y aura donc également une petite différence entre les implémentations.

Voici la version ES5:

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

et voici la version ES6:

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

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

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

Faites juste attention, à côté de la différence de syntaxe dans l'implémentation de classe, il y a une différence dans la liaison du gestionnaire d'événements.

Dans la version ES5, c'est

              <button onClick={this.delta}>+</button>

Dans la version ES6, c'est:

              <button onClick={this.delta.bind(this)}>+</button>

Lorsque vous utilisez du code ES6 dans React, utilisez toujours les fonctions fléchées, car ce contexte est automatiquement lié à celui-ci

Utilisez ceci:

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

au lieu de:

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

Vous n'avez rien à lier, utilisez simplement les fonctions fléchées comme ceci:

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

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

Vous pouvez aussi utiliser:

<button onClick={()=>this.delta()}>+</button>

Ou:

<button onClick={event=>this.delta(event)}>+</button>

Si vous passez quelques paramètres ..

Vous devez le lier au constructeur et n'oubliez pas que les modifications apportées au constructeur doivent redémarrer le serveur. Sinon, vous finirez avec la même erreur.

Vous devez lier vos méthodes avec 'this' (objet par défaut). Donc, quelle que soit votre fonction, il suffit de la lier dans le constructeur.

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );

Cette erreur peut être résolue par différentes méthodes -

• Si vous utilisez la syntaxe ES5 , selon la documentation React js, vous devez utiliser la méthode bind .

  Quelque chose comme ça pour l'exemple ci-dessus:

  this.delta = this.delta.bind(this)

• Si vous utilisez la syntaxe ES6 , vous n'avez pas besoin d'utiliser la méthode bind , vous pouvez le faire avec quelque chose comme ceci:

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

Il existe deux solutions à ce problème:

La première solution consiste à ajouter un constructeur à votre composant et à lier votre fonction comme ci-dessous:

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

Faites donc ceci:

this.delta = this.delta.bind(this); 

Au lieu de cela:

this.delta.bind(this);

La deuxième solution consiste à utiliser une fonction flèche à la place:

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

En fait, la fonction de flèche ne lie pas la sienne this. Fonctions flèches lexicalement bindleur contexte thisse réfère donc en fait au contexte d'origine .

Pour plus d'informations sur la fonction de liaison:

Fonction Bind Comprendre JavaScript Bind ()

Pour plus d'informations sur la fonction flèche:

Javascript ES6 - Fonctions fléchées et lexical this

vous devez lier un nouvel événement avec ce mot - clé comme je le mentionne ci-dessous ...

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta = this.delta.bind(this);
    }

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

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

Ajouter

onClick = {this.delta.bind (this)}

va résoudre le problème. cette erreur survient lorsque nous essayons d'appeler la fonction de la classe ES6, nous devons donc lier la méthode.

La fonction flèche aurait pu vous faciliter la vie pour éviter de lier ce mot - clé. Ainsi:

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

bien que cette question ait déjà une solution, je veux juste partager la mienne pour qu'elle soit clarifiée, j'espère qu'elle pourrait aider:

/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=> {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () => {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>

    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
    <script type="text/babel">

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=>{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=>{
                if(this.state.counter > 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () => {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    <div>
                        <button onClick={this.increment}> Increment </button>
                        <button onClick={this.decrement}> Decrement </button>
                        {this.state.counter}
                        <button onClick={this.onEventHandler}> {this.state.isToggle ? 'Hi':'Ajay'} </button>

                    </div>
                    )
            }
        }
        ReactDOM.render(
        <App/>,
        document.getElementById('root'),
      );
    </script>
  </body>
  </html>

Changez simplement votre instruction bind de ce que vous avez à => this.delta = this.delta.bind (this);

1. Vérifier l'état vérifier l'état si vous créez une propriété particulière ou non

this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2. Vérifiez le (this) si vous faites setState dans une fonction (ie handleChange) vérifiez si la fonction est liée à ceci ou si la fonction doit être une fonction de flèche.

## 3 façons de le lier à la fonction ci-dessous ##

//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() => ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=> {  
     this.setState(() => ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }

si vous utilisez la syntaxe ES5, vous devez la lier correctement

this.delta = this.delta.bind(this)

et si vous utilisez ES6 et au- dessus , vous pouvez utiliser la fonction flèche, vous n'avez pas besoin d'utiliser bind () , il

delta = () => {
    // do something
  }