2016-12-08 21 views
2

Ich erhalte einen Fehler "TypeError: Kann die Eigenschaft 'setState' von undefined nicht lesen, während ich in ReactJS eine einfache Sache mache. Ich versuche Axios zu verwenden, um Eingabe mit Antwortdaten zu füllen. Bis jetzt ohne Erfolg. Ich bin sehr neu in beiden Axios und ReactJs, also könnte es etwas sehr einfaches sein, das ich übersehen habe?Axios ReactJS - Eigenschaft 'setState' von undefined kann nicht gelesen werden

Ich würde erwarten, "RESPONSE TEXT" in Eingabefeld in der Form nach dem TypeError behoben wird.

Dies ist meine Komponente:

class BasicInfoBlock extends React.Component { 

constructor(props) { 
    super(props); 

    this.state = { name : "EventTestName" }; 
} 

componentDidMount() { 
    axios 
    .get(getBaseUrl()+`get`) 
    .then(function (response) { 
     this.setState({name: "RESPONSE TEXT"}); 
     //this.setState({name: response.data.name}); 
    }) 
    .catch((e) => 
    { 
     console.error(e); 
    }); 
    //this.setState({}); 
} 


render(){ 
    return(
      <form className="form-horizontal"> 
       <div className="form-group"> 
        <label htmlFor="eventName" className="col-sm-2 control-label">Name</label> 
        <div className="col-sm-10"> 
        <input type="text" id="eventName" className="form-control" placeholder="Event name" defaultValue={this.state.name}/> 
        </div> 
       </div> 
      </form> 
     ); 
} 

}

Dank für Ihre Hilfe danken

edit: dies kein Duplikat Frage ist, bezieht sich diese Fragen zu 'this' in nicht zur Verfügung stehen Rückrufen. Frage, die als Duplikat ausgewählt wurde, hängt mit der Bindung zusammen.

+1

Mögliche Duplikat [Uncaught Typeerror: kann Eigenschaft ‚setState‘ undefinierter lesen] (http://stackoverflow.com/questions/32317154/uncaught-typeerror- can not-read-property-setstate-of-undefined) –

+1

Das Problem ist der Kontext von 'this' innerhalb der Callback-Funktion. –

+0

Nicht ein Duplikat, lesen Sie bearbeiten – rluks

Antwort

9

In Ihrer Promise's then-Methode bezieht sich this nicht mehr auf die Komponente. Sie könnten beheben, indem Sie einen Pfeil Funktion wie folgt verwendet:

componentDidMount() { 
    axios 
    .get(getBaseUrl()+`get`) 
    .then((response) => { 
    this.setState({name: "RESPONSE TEXT"}); 
    //this.setState({name: response.data.name}); 
    }) 
    .catch((e) => 
    { 
    console.error(e); 
    }); 
    //this.setState({}); 
} 
+0

Danke, Fehler ist weg. Mein Eingabefeld wird jedoch immer noch nicht mit dem "RESPONSE TEXT" ausgefüllt und ich habe keine Ahnung warum. – rluks

+1

@rluks Sie müssen die Property "value" und nicht "defaultValue" festlegen. Um die Warnung zu quetschen, die React auslösen wird, können Sie 'this.state.value' mit einer leeren Zeichenkette initialisieren. – Bojangles

+0

Sie setzen die prop defaultValue, nicht value. Der Standardwert wird nur beim mount initialisiert, nicht beim Aufruf von setState. Ich empfehle, die React-Dokumentation über kontrollierte Komponenten zu lesen. –

Verwandte Themen