wake-up-neo.com

React - nicht abgerufen TypeError: Eigenschaft 'setState' von undefined nicht lesen

Ich erhalte folgende Fehlermeldung

Uncught TypeError: Eigenschaft 'setState' von undefined kann nicht gelesen werden

auch nach dem Binden von Delta im Konstruktor.

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

Dies liegt daran, dass this.delta nicht an this gebunden ist.

Um das Set this.delta = this.delta.bind(this) im Konstruktor zu binden:

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

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

Derzeit rufen Sie bind an. Bind gibt jedoch eine gebundene Funktion zurück. Sie müssen die Funktion auf ihren gebundenen Wert setzen.

308
Davin Tryon

In ES7 + (ES2016) können Sie die experimentelle Funktionsbindungssyntax - Operator :: zum Binden verwenden. Es ist ein syntaktischer Zucker und wird dasselbe tun wie die Antwort von Davin Tryon.

Sie können dann this.delta = this.delta.bind(this); in this.delta = ::this.delta; umschreiben.


Für ES6 + (ES2015) können Sie auch die ES6 + Pfeilfunktion (=>) verwenden, um this verwenden zu können. 

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

Warum ? Aus dem Mozilla-Dokument:

Bis zu den Pfeilfunktionen definiert jede neue Funktion ihren eigenen this Wert [...]. Dies erwies sich bei einem objektorientierten Programmierstil als störend.

Pfeilfunktionen erfassen den this Wert des umgebenden Kontextes [...]

101
Fabien Sa

Zwischen den Klassen ES5 und ES6 besteht ein unterschiedlicher Kontext. Es gibt also auch einen kleinen Unterschied zwischen den Implementierungen.

Hier ist die ES5-Version:

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

und hier ist die ES6-Version:

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

Seien Sie einfach vorsichtig, neben dem Syntaxunterschied in der Klassenimplementierung gibt es einen Unterschied in der Eventhandler-Bindung. 

In der ES5-Version ist es

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

In der ES6-Version heißt es:

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

Verwenden Sie bei der Verwendung von ES6-Code in React immer Pfeilfunktionen, da der Kontext " this " automatisch mit ihm verbunden wird

Benutze das:

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

anstatt:

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

Sie müssen nichts binden, verwenden Sie einfach die Pfeilfunktionen: 

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>
        );
    }
}
11
Gabo Ruiz

Sie können auch verwenden:

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

Oder: 

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

Wenn Sie einige Params übergeben ... 

6
Jaroslav Benc

Sie müssen Ihre Methoden mit 'this' (Standardobjekt) binden. So was auch immer Ihre Funktion sein mag, binden Sie das einfach im Konstruktor.

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>
    );
5
Shahrukh Anwar

Sie müssen dies an den Konstruktor binden und daran denken, dass Änderungen am Konstruktor den Server neu starten müssen. Oder Sie enden mit dem gleichen Fehler.

5
Anil

sie müssen ein neues Ereignis mit dieses Schlüsselwort binden, wie ich unten erwähne ...

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>
        );
      }
    }
1
Neel Patel

Es gibt zwei Lösungen für dieses Problem:

Die erste Lösung besteht darin, Ihrer Komponente einen Konstruktor hinzuzufügen und Ihre Funktion wie folgt zu binden:

constructor(props) {
        super(props);

        ...

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

Also mach das:

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

An Stelle von:

this.delta.bind(this);

Die zweite Lösung besteht darin, stattdessen eine Pfeilfunktion zu verwenden:

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

Aktuelle Pfeilfunktion DOES NOT bindet die eigene this. Pfeil funktioniert lexikalisch bind ihr Kontext, so dass this tatsächlich auf den rsprungskontext ​​verweist.

Weitere Informationen zur Bindefunktion:

BindefunktionGrundlegendes zu JavaScript Bind ()

Weitere Informationen zur Pfeilfunktion:

Javascript ES6 - Pfeilfunktionen und Lexikalisch this

1
Mselmi Ali

Dieser Fehler kann durch verschiedene Methoden behoben werden.

  • Wenn Sie ES5 -Syntax verwenden, müssen Sie gemäß React js Documentation bind -Methode verwenden.

    So etwas für das obige Beispiel:

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

  • Wenn Sie die Syntax ES6 verwenden, brauchen Sie die Methode bind nicht zu verwenden. Sie können dies folgendermaßen tun:

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

0
hardik chugh

Die Pfeilfunktion könnte Ihr Leben einfacher machen, um das Binden zu vermeiden this keyword. Wie so:

 delta = () => {
       this.setState({
           count : this.state.count++
      });
   }
0
Emeka Augustine
  1. Status prüfen Status prüfen, ob Sie eine bestimmte Eigenschaft erstellen oder nicht
this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() => ({ 
             comments: comments          //comments not available in state
             })) 

2 .Aktivieren Sie das Kontrollkästchen (this) Wenn Sie setState in einer Funktion ausführen (d. H. HandleChange), überprüfen Sie, ob die an diese Funktion gebundene Funktion oder die Funktion eine Pfeilfunktion sein soll.

## 3 Möglichkeiten, dies an die folgende Funktion zu binden ##

//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)
        }
0
K23raj

obwohl diese Frage bereits eine Lösung hatte, möchte ich nur meine weitergeben, damit sie geklärt wird. Ich hoffe, es könnte helfen:

/* 
 * 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() {
   //....
   }
}
0
Kai

Ändern Sie einfach Ihre Bind-Anweisung von dem, was Sie haben müssen. this.delta = this.delta.bind (this);

0
Kilo One
<!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>
0
Ajay

Hinzufügen 

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

wird das Problem lösen. Dieser Fehler tritt auf, wenn wir versuchen, die Funktion der ES6-Klasse aufzurufen.

0