Reagieren setState zwischen den Komponenten ES6

Habe ich eine sehr einfache Anwendung, wo ich bin versucht, zu aktualisieren, den Status einer übergeordneten Komponente aus einer Kind-Komponente wie folgt:

import React from '../../../../../../../dependencies/node_modules/react';
import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom';

class CalendarMain extends React.Component {
    constructor() {
        super();
    }

    handleClick() {
        this.props.handleStateClick("State Changed");
    }

    render() {
        return ( 
            <div>
                <div className="calendar">
                    {this.props.checkIn}
                    <button onClick={ this.handleClick.bind(this) }>Click Me</button>
                </div>
            </div>
        )
    }
}

class CalendarApp extends React.Component {

    constructor() {
        super();

        this.state = { 
            checkIn: "Check-in",
            checkOut: "Check-out",
            dateSelected: false 
        };
    }

    handleStateClick( newState ) {
        this.setState({
            checkIn: newState
        });
    }

    render() {

        return (
            <div>
                <CalendarMain 
                    checkIn = { this.state.checkIn }
                    handleStateClick = { this.handleStateClick.bind(this) }
                />
            </div>
        );
    }
}

Die Fehler ich erhalte, ist this.setState is not a function und ich kann nicht herausfinden, warum. Jede Hilfe wäre sehr geschätzt werden!

  • Stellen Sie sicher, dass Sie nicht versehentlich mutiertthis.setState anderswo. ie: this.setState = { foo: 'bar' };
  • Nur bemerken die ../../..... stellen Sie sicher, dass der relative Pfad bleibt in Ihrem Projekt, ansonsten verschieben des Projekts (Upload auf remote, die Veröffentlichung auf github / npm, was auch immer) brechen könnte diese Pfade.
  • Möchten Sie vielleicht überdenken Sie Ihre Projekt-Hierarchie
  • Die Art und Weise, die Sie importieren, Reagieren, ist sehr... enttäuschend.
  • Es funktioniert tatsächlich mit der neuesten version von React: jsfiddle.net/1uh9e8wx
InformationsquelleAutor Tom Pinchen | 2016-06-13
  1. 7

    this ist nicht automatisch verpflichtet, in ES6-Stil-syntax.

    Entweder:

    1. Binden im Konstruktor in etwa so: this.func = this.func.bind(this)
    2. Verwenden Sie die Pfeiltasten Funktion syntax für die Funktion in Frage, etwa so: func = () => {};

    Mehr hier: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

    • MDN-Dokumentation auf den Pfeil-Funktionen (Lambda-Ausdrücke) für weitere Referenz
    • Die OP scheint es zu binden schon: handleStateClick = { this.handleStateClick.bind(this) }.
    InformationsquelleAutor pmilla1606
  2. 5

    Verwenden () => lambda zu bieten lexikalischen scoping und binden korrekte Wert dieser innerhalb der Methode handleStateClick():

    handleStateClick = () => {
  this.setState({
    checkIn: newState
  });
}
    • Möchten Sie vielleicht zu erklären, dass dieses feature ist experimentell und die Babel verwandelt zu umfassen, um diese Arbeit zu machen.
    • Unter der Annahme, dass OP bereits mit ES6-Klassen und-import, würde man annehmen, dass Sie haben alle die Voraussetzung, Einrichtung der Umgebung
    • Scheint ein bisschen weit hergeholt... Sie sind sich bewusst, dass dies ein Vorschlag und nicht Bestandteil des ES6?
    • Ich denke, es ist Teil des ES6, wie Sie hier erwähnt: ecma-international.org/ecma-262/6.0/.... Vielleicht bin ich etwas fehlt, und Sie kann mir einige Ressourcen für das, was Sie erklärt. Wenn Sie Hinweise auf den Einsatz von transpilers, ich glaube, OP hat festgelegt, dass bereits bis
    • Die syntax, die Sie vorschlagen, zu verwenden, scheint zu sein github.com/jeffmo/es-class-fields-and-static-properties . Dies ist derzeit eine Phase-1-Vorschlag, also das entsprechende plugin oder preset Hinzugefügt werden, um dies zu ermöglichen.
    InformationsquelleAutor Aditya Singh
Schreibe einen Kommentar