Ich bin neu in React und versuche, eine App zu schreiben, die mit einer API arbeitet. Ich bekomme immer wieder diesen Fehler:
TypeError: this.setState ist keine Funktion
wenn ich versuche, die API-Antwort zu verarbeiten. Ich vermute, dass mit dieser Bindung etwas nicht stimmt, aber ich kann nicht herausfinden, wie ich sie beheben kann. 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>
);
}
});
javascript
reactjs
Ivan
quelle
quelle
Mit einer ES6-Pfeilfunktion können Sie die Notwendigkeit von .bind (this) vermeiden.
quelle
onChange={(checked) => this.toggleCheckbox()}
, 2)onChange={this.toggleCheckbox.bind(this)}
..bind(this)
, der Wert vonthis
auf den übergeordneten Kontext gesetztthis.toggleCheckbox()
wird, von dem aus aufgerufen wird, andernfallsthis
würde er sich darauf beziehen, wo er tatsächlich ausgeführt wurde. b) Die Fettpfeil-Lösung funktioniert, weil sie den Wert von beibehält.this
Sie hilft Ihnen also, indem Sie den Wert von nicht gewaltsam ändernthis
.this
Bezieht sich in JavaScript einfach auf den aktuellen Bereich. Wenn Sie also eine Funktion schreiben,this
ist dies diese Funktion. Wenn Sie eine Funktion darin platzieren,this
befindet sie sich in dieser untergeordneten Funktion. Fette Pfeile halten den Kontext von wo aufgerufenSie können auch einen Verweis auf speichern,
this
bevor Sie dieapi
Methode aufrufen :quelle
React empfiehlt, dies in allen Methoden zu binden, die dies
class
anstelle von self verwenden müssenfunction
.Oder Sie können
arrow function
stattdessen verwenden.quelle
Sie müssen nur Ihre Veranstaltung binden
zum Beispiel
quelle
Jetzt hat ES6 eine Pfeilfunktion. Wenn Sie wirklich mit dem Ausdruck bind (this) verwechseln, können Sie die Pfeilfunktion ausprobieren
So mache ich das.
quelle
Sie müssen dies keiner lokalen Variablen zuweisen, wenn Sie die Pfeilfunktion verwenden. Die Pfeilfunktionen werden automatisch gebunden und Sie können sich mit Problemen im Zusammenhang mit dem Bereich fernhalten.
Der folgende Code erläutert die Verwendung der Pfeilfunktion in verschiedenen Szenarien
quelle
In Reaktion auf es6 / 7 können Sie die Funktion mit der folgenden Pfeilfunktion an den aktuellen Kontext binden, Anfragen stellen und Versprechen wie folgt auflösen:
Mit dieser Methode können Sie diese Funktion einfach in componentDidMount aufrufen und die Daten abwarten, bevor Sie Ihr HTML in Ihrer Renderfunktion rendern.
Ich kenne die Größe Ihres Projekts nicht, rate jedoch persönlich davon ab, den aktuellen Status der Komponente zum Bearbeiten von Daten zu verwenden. Sie sollten dafür einen externen Status wie Redux oder Flux oder etwas anderes verwenden.
quelle
Verwenden Sie Pfeilfunktionen, da Pfeilfunktionen auf den übergeordneten Bereich verweisen und dieser verfügbar ist. (Ersatz der Bindetechnik)
quelle
Hier ändert sich DIESER Kontext. Verwenden Sie die Pfeilfunktion, um den Kontext der React-Klasse beizubehalten.
quelle
Wenn Sie dies tun und immer noch ein Problem haben, ist mein Problem, dass ich zwei Variablen mit demselben Namen aufgerufen habe.
Ich hatte
companies
als Objekt von Firebase gebracht und versuchte dann anzurufenthis.setState({companies: companies})
- es funktionierte aus offensichtlichen Gründen nicht.quelle