Ich möchte meine Komponente rendern, nachdem meine Ajax-Anfrage abgeschlossen ist.
Unten sehen Sie meinen Code
var CategoriesSetup = React.createClass({
render: function(){
var rows = [];
$.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
$.each(data, function(index, element){
rows.push(<OptionRow obj={element} />);
});
return (<Input type='select'>{rows}</Input>)
})
}
});
Aber ich bekomme den Fehler unten, weil ich Rendering innerhalb der erledigten Methode meiner Ajax-Anfrage zurückgeben.
Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Gibt es eine Möglichkeit zu warten, bis meine Ajax-Anfrage beendet ist, bevor mit dem Rendern begonnen wird?
javascript
ajax
asynchronous
reactjs
jquery-deferred
Thunfisch
quelle
quelle
Antworten:
Es gibt zwei Möglichkeiten, dies zu handhaben. Welche Sie auswählen, hängt davon ab, welche Komponente die Daten und den Ladezustand besitzen soll.
Verschieben Sie die Ajax-Anforderung in das übergeordnete Element und rendern Sie die Komponente unter bestimmten Bedingungen:
Behalten Sie die Ajax-Anforderung in der Komponente bei und rendern Sie während des Ladens bedingt etwas anderes:
quelle
if (this.state.data)
sollte sein,if (this.state && this.state.data)
weil manchmal Zustand null sein kann.this.state
dasnull
?Das grundlegende Beispiel für das asynchrone Rendern von Komponenten ist unten aufgeführt:
quelle