Reagieren – nicht abgefangen TypeError: Eigenschaft ‘setState’ von undefined kann nicht gelesen werden

Lesezeit: 5 Minuten

Reagieren nicht abgefangen TypeError Eigenschaft setState von undefined kann
Dangling_pointer

Ich erhalte den folgenden Fehler

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

  • In ES6 können Sie die Pfeilfunktion für die Funktionsdeklaration verwenden, um dieses Problem zu beheben.

    – Tal

    25. November 2019 um 12:15 Uhr


  • ^ Dies sollte die richtige Antwort sein

    – Jordec

    26. Februar 2020 um 11:23 Uhr

  • Ich habe meine Antwortfunktion in ES6 geändert, und hurrey, es funktioniert.

    – Ashwani Garg

    23. Mai 2020 um 16:38 Uhr

Das ist wegen this.delta nicht gebunden sein this.

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

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

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

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

  • Was um alles in der Welt ist der Sinn von ES6-Klassen, wenn ihre Methoden keinen richtigen Wortschatz haben this Bindung, und stellen Sie dann nicht einmal eine Syntax zur Verfügung, um ihren Kontext direkt an ihre Definition zu binden!?

    – AGmLauncher

    18. Oktober 2016 um 0:34 Uhr

  • Ich verstehe Ihren Punkt, aber wenn ich Code in componentWillMount() schreibe, wie werde ich dann binden

    – suresh pareek

    31. Juli 2017 um 12:54 Uhr

  • @sureshpareek Sobald Sie Ihre Funktion im Konstruktor gebunden haben, sollte sie gebunden werden, wenn Sie sie von einem beliebigen Lebenszyklus-Hook aufrufen.

    – Levi Fuller

    20. November 2017 um 21:48 Uhr

  • @AgmLauncher Ich glaube nicht, dass es ein Problem mit den ES6-Klassen selbst ist, sondern mit der Funktionsweise von React-Komponenten.

    – Tess E. Duursma

    27. Dezember 2018 um 21:29 Uhr

  • Die Verwendung von Lambda-Funktionen durch @AgmLauncher bindet dies implizit. Wenn Sie definiert haben delta als delta = () => { return this.setState({ count: this.state.count++ }); }; der Code würde auch funktionieren. Hier erklärt: hackernoon.com/…

    – K. Rhoda

    10. April 2019 um 17:25 Uhr

1646170508 447 Reagieren nicht abgefangen TypeError Eigenschaft setState von undefined kann
Fabien Sa

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

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


Zum ES6+ (ES2015) können Sie auch den ES6+ verwenden Pfeilfunktion (=>) verwenden zu können this.

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

Warum ? Aus dem Mozilla-Dokument:

Bis die Pfeilfunktionen funktionierten, definierte jede neue Funktion ihre eigene Das Wert […]. Dies erwies sich bei einem objektorientierten Programmierstil als störend.

Pfeilfunktionen erfassen die Das Wert des umschließenden Kontextes […]

  • Schöner Artikel, der das ausführlich beschreibt: reakkungfu.com/2015/07/…

    – Ed

    9. Juni 2016 um 10:59 Uhr

  • Was ist der Vorteil der Verwendung eines gegenüber dem anderen, abgesehen von der Syntax?

    – Jeremy D

    8. November 2016 um 19:52 Uhr

  • Die Bindungssyntax ist sauberer, da Sie den normalen Gültigkeitsbereich Ihrer Methode beibehalten können.

    – FabienSa

    8. November 2016 um 22:02 Uhr

  • Die Bindungssyntax ist nicht Teil von ES2016 oder ES2017.

    – Felix Klinge

    22. September 2017 um 14:12 Uhr

  • @stackoverflow sollte die Möglichkeit hinzufügen, jeder Antwort ein Kopfgeld hinzuzufügen.

    – Gabe

    8. Oktober 2018 um 5:27 Uhr

Es gibt einen Kontextunterschied zwischen der ES5- und der ES6-Klasse. Es wird also auch einen kleinen Unterschied zwischen den Implementierungen geben.

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 nur vorsichtig, neben dem Syntaxunterschied in der Klassenimplementierung gibt es einen Unterschied in der Event-Handler-Bindung.

In der ES5-Version ist es

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

In der ES6-Version ist es:

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

  • Die Verwendung von Pfeilfunktionen oder Bindungen in JSX ist eine schlechte Praxis. stackoverflow.com/questions/36677733/….

    – FabienSa

    22. Oktober 2017 um 13:26 Uhr

Reagieren nicht abgefangen TypeError Eigenschaft setState von undefined kann
Gabo Ruiz

Sie müssen nichts binden, verwenden Sie einfach Pfeilfunktionen wie diese:

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

Bubble Sort Algorithmus JavaScript closed
Ignatius Andreas

Verwenden Sie bei der Verwendung von ES6-Code in React immer Pfeilfunktionen, da die Das Kontext wird automatisch damit verknüpft

Benutze das:

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

anstatt:

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

  • Bei Verwendung der Pfeilfunktion und der Parametervariable ist das gleiche wie die Schlüsselvariablewürde ich empfehlen, es als zu verwenden this.setState({videos});

    – jayeshkv

    29. Juli 2017 um 22:13 Uhr


  • Das hat es für mich getan. Ich bin neu bei node, und die Dokumentation für das Axios-Modul war nicht mit React und SetState kompatibel

    – dabobert

    2. Januar 2019 um 22:05 Uhr

Festlegen des Dokumentenstamms fur das Laravel Projekt auf dem virtuellen Apache Host
Shahrukh Anwar

Sie müssen Ihre Methoden mit ‘this’ (Standardobjekt) binden. Was auch immer Ihre Funktion sein mag, binden Sie sie einfach in den 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>
    );

  • Bei Verwendung der Pfeilfunktion und der Parametervariable ist das gleiche wie die Schlüsselvariablewürde ich empfehlen, es als zu verwenden this.setState({videos});

    – jayeshkv

    29. Juli 2017 um 22:13 Uhr


  • Das hat es für mich getan. Ich bin neu bei node, und die Dokumentation für das Axios-Modul war nicht mit React und SetState kompatibel

    – dabobert

    2. Januar 2019 um 22:05 Uhr

Reagieren nicht abgefangen TypeError Eigenschaft setState von undefined kann
Jaroslav Benc

Sie können auch verwenden:

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

Oder:

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

Wenn Sie einige Parameter übergeben.

  • Es ist eine schlechte Praxis, Pfeilfunktionen in JSX zu verwenden

    – Gabe

    9. Oktober 2018 um 3:56 Uhr

905100cookie-checkReagieren – nicht abgefangen TypeError: Eigenschaft ‘setState’ von undefined kann nicht gelesen werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy