Reagieren dieser.setState keine Funktion
Ich bin neu in Reagieren, und ich bin versucht, zu schreiben eine app, die das arbeiten mit einer API. Ich bekomme immer diese Fehlermeldung:
TypeError: this.setState ist nicht eine Funktion
wenn ich versuchen, mit der API-Antwort. Ich vermute, es ist etwas falsch mit dieser Bindung aber ich kann nicht herausfinden, wie es zu lösen ist. Hier ist der code meiner Komponente:
var AppMain = React.createClass({
getInitialState: function() {
return{
FirstName: " "
};
},
componentDidMount:function(){
VK.init(function(){
console.info("API initialisation successful");
VK.api('users.get',{fields: 'photo_50'},function(data){
if(data.response){
this.setState({ //the error happens here
FirstName: data.response[0].first_name
});
console.info(this.state.FirstName);
}
});
}, function(){
console.info("API initialisation failed");
}, '5.34');
},
render:function(){
return (
<div className="appMain">
<Header />
</div>
);
}
});
InformationsquelleAutor Ivan | 2015-06-25
Du musst angemeldet sein, um einen Kommentar abzugeben.
Rückruf erfolgt in einem anderen Kontext. Sie müssen
bind
zuthis
um den Zugriff innerhalb des callback:BEARBEITEN:
Sieht aus wie Sie binden sowohl die
init
undapi
Aufrufe:Nein. Es gibt keine Erwähnung von binden in der Anleitung.
Da war wohl vor 2,5 Jahren. ?
Nur diese verwendet, danke!
InformationsquelleAutor Davin Tryon
Können Sie vermeiden, die Notwendigkeit für .binden Sie(dies) mit einem ES6-Pfeil-Funktion.
Deine Antwort hat mir geholfen:-) Mit einem ES6 Klasse und RN 0.34, fand ich zwei Arten zu binden "dieser" auf eine callback-Funktion. 1)
onChange={(checked) => this.toggleCheckbox()}
, 2)onChange={this.toggleCheckbox.bind(this)}
.kann helfen, erklären, wie diese Arbeit?
Dies ist so lange gut wie Sie nicht brauchen, um die Unterstützung von alten Browsern.
GMsoF, diese beiden Lösungen funktionieren, weil a) wenn Sie
.bind(this)
es setzt den Wert vonthis
zu den übergeordneten Kontext, wothis.toggleCheckbox()
aufgerufen wird, sonstthis
finden würde, wo er tatsächlich ausgeführt wird. b) Der fat-arrow-Lösung arbeitet, denn es bewahrt den Wertthis
, so ist es zu helfen, Sie durch nicht gewaltsam ändern Sie den Wert vonthis
. In JavaScriptthis
bezieht sich lediglich auf den aktuellen Bereich, also, wenn Sie eine Funktion schreiben,this
ist, die Funktion. Wenn Sie eine Funktion drin,this
innerhalb, untergeordnete Funktion. Fette Pfeile halten den Kontext von wo aus aufgerufenInformationsquelleAutor goodhyun
könnte man auch eine entsprechende Referenz speichern
this
vor, Sie rufen dieapi
Methode:InformationsquelleAutor user2954463
Nun ES6 haben Pfeil-Funktion ist es wirklich hilfreich, wenn Sie wirklich zu verwechseln mit bind(this) Ausdruck können Sie versuchen, Pfeil-Funktion
Dies ist, wie ich es Tue.
InformationsquelleAutor Sameel
Den Sie brauchen nur binden Sie Ihre Veranstaltung
für ex-
InformationsquelleAutor g8bhawani
Reagieren, empfiehlt binden diese in alle Methoden, die benötigt diesen von
class
statt diese selbstfunction
.Oder Sie verwenden
arrow function
statt.InformationsquelleAutor uruapanmexicansong
Nun in reagieren mit es6/7 können Sie die bind-Funktion, um den aktuellen Kontext, mit der Pfeil-Funktion wie diese, stellen Sie Anfrage und zu lösen verspricht, wie dieses :
Mit dieser Methode können Sie ganz einfach diese Funktion aufrufen, in der componentDidMount und warten Sie die Daten vor dem Rendern des html-Codes in Ihre render-Funktion.
Ich weiß nicht, die Größe von deinem Projekt, aber ich persönlich rate gegen die Verwendung des aktuellen Status der Komponente zu manipulieren Daten.
Sie sollten die Verwendung von externen Zustand wie Redux oder Fluss, oder etwas anderes für diese.
InformationsquelleAutor Quentin Malguy
Die Sie nicht benötigen, berechtigt, diesen auf eine lokale variable, wenn Sie mit dem Pfeil-Funktion. Pfeil-Funktionen nimmt die Bindung automatisch und Sie können bleiben Weg mit Rahmen-Themen.
Code unten erläutert, wie Sie mithilfe der Pfeil-Funktion in verschiedenen Szenarien
InformationsquelleAutor Hemadri Dasari
Hier in DIESEM Kontext immer verändert. Verwenden Sie die Pfeiltasten Funktion zu halten, Kontext Reagieren Klasse.
InformationsquelleAutor Shubham Gupta
Wenn Sie dies tun und immer noch ein Problem, mein problem ist, ich rief zwei Variablen mit dem gleichen Namen.
Hatte ich
companies
als Objekt brachte in der Feuerstellung, und dann wurde versucht, rufen Siethis.setState({companies: companies})
- es war nicht der Arbeit aus offensichtlichen Gründen.InformationsquelleAutor LukeVenter