Abrufen von Daten mit Reagieren
Ich bin sehr neu mit Reagieren und ich bin versucht, zu rufen die Daten vom server mit fetch
api.
Wenn ich das machen will, eine helper-Klasse, um die Daten, wie diese
JS:
import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';
let responseData = response => {
return response;
};
let getData = (dataURL, headers) => {
let result = {
data: [],
message: ''
};
if (dataURL === null || dataURL === undefined || dataURL === '') {
result.message = 'URL is not correct';
responseData(result);
}
fetch(dataURL, headers)
.then(response =>{
if (response.ok) {
response.json().then(data => {
result.data = data;
result.message = response.statusText;
responseData(result);
});
}else{
result.message = 'Network response was not ok.';
responseData(result);
}
})
.catch(err => console.log(err));
};
exports.responseData = responseData;
exports.getData = getData;
und immer dann, wenn die Daten verfügbar sind, werde ich Fragen, die Reagieren Rendern der view, während der Wartezeit, es wird sich zeigen, ein lade-Symbol.
Ich den Anruf innerhalb componentDidMout
sondern durch die Zeit es ausgeführt wird, das Ergebnis ist immer undefined
.
JS:
componentDidMount() {
var self = this;
let result = util.getData('http://localhost:3001/menus');
const { dispatch } = this.props;
//dispatch(menuActions.fetchMenusIfNeeded());
if (result !== null && result !== undefined) {
if (this.isMounted()) {
this.setState({
items: result.data.results
});
}
}
}
In Winkel, wenn die Daten verfügbar ist, wird es entsprechend aktualisiert werden, aber ich verstehe wirklich nicht, wie es in Reagieren.
BEARBEITEN 1:
Aktualisieren Sie die helper-Klasse:
JS:
import { Promise } from 'es6-promise';
import fetch from 'isomorphic-fetch';
let getData = (dataURL, headers) => {
return fetch(dataURL, headers);
};
exports.getData = getData;
Wird es immer wieder ein Promise
so kann ich die Kette handler für Daten in anderen Komponenten. Das einzige problem, das ich behandeln müssen, der Nachricht zurück, durch Lesen Response
Objekt meiner Komponenten.
In Reagieren Komponente:
JS:
componentWillMount() {
util.getData('http://localhost:3001/menus')
.then(response =>{
if (response.ok) {
response.json().then(data => {
console.log(data);
this.setState({
items: data.result
});
});
}
})
.catch(err => console.log(err));
}
Aber wenn es die Daten erhalten, die render()
Funktion schon fertig, soll ich es zwingen, bis wieder ein update?
- Sie nicht wieder alles von
getData
- Funktion, aber selbst wenn Sie es zurückresult
dies ist async, so dass Sie nicht sehenresult
imcomponentDidMount
. - Ich Verstand das problem, aber immer, wenn ich wieder ein
Promise
wie sollte ich mich informieren, Reagieren zu aktualisierenrender()
Funktionen. - Einen Artikel mit Antworten auf alle Fragen rund um das wie, Wann und wo zum abrufen von Daten in Reagieren: Wie abrufen von Daten im Reagieren. Vielleicht hilft es, Menschen zu lernen, um, wenn Sie stolpern über diese Frage.
Du musst angemeldet sein, um einen Kommentar abzugeben.
result
ist nicht die Daten, es ist ein Versprechen, das Sie verwenden können, um auf die Daten zugreifen. Sie brauchen, um wieder das Versprechen von fetch und auch brauchen, um die Daten zurück, die aus Ihrerthen
innerhalbgetData
, und aktualisieren Sie Ihre Reagieren-code.getData ändern
Reagieren ändern
then()
für dieresult
aber dieresult
ist immerundefined
, sollte ich versuchen, wieder direkt ausfetch
?if (response.ok) {
, so oder so, ich denke das Problem könnte sein, dass Sie initialisieren Sie Ihren Zustand mit:data: []
aber Sie setzen das Ergebnis in Zustand beiitems:
. Sie wahrscheinlich benötigen, um zu aktualisieren, zu:this.setState({ data: data.results })
- vorausgesetzt, Ihre render-Funktion aufdata
und nichtitems
console.log
im inneren, ich sah immer die Daten, die protokolliert worden ist, so denke ich, dass dieif(reponse.ok)
ist truthy, ich habe nicht init zuerst die Daten, ich habe gerade dieitems
durch die Funktion, ist das der richtige Weg oder sollte ich versuchen, init einerthis.props.items = []
ersten?Sollten Sie nicht versuchen, die Verzögerung, die rendering-und/oder Montage des Bauteils bis Sie eine Antwort bekommen. Stattdessen sollten Sie Gebrauch machen von Rückrufen, um sicherzustellen, dass alles aktualisiert wird, wie Sie möchten, wenn die Anfrage über.
Müssen Sie nur den code ändern, der für
getData
so, dass es führt eine callback-sobald die Anfrage über. Sie haben hier zwei Optionen.getData
Funktion akzeptiert einen Dritten parametercallback
und diese Methode aufrufen, sobald Sie mit der Antwort. Dies würde in etwa wie folgt Aussehen:Beachten Sie, dass diese nicht wie eine tatsächliche Umsetzung Aussehen würde. Im Fall einer exception den callback würde nicht aufgerufen werden und der aufrufende code würde nie wissen, was passiert ist. Aber im Grunde ist dies, wie es funktionieren würde.
getData
Funktion zurückgeben, die Versprechen, erstellt von derfetch
API. Dies ist die eine, die ich verwenden würde, persönlich, denn es sieht sauberer aus, und würde ich nehmen, Versprechungen über Rückrufe an jedem Tag der Woche.Nur das hinzufügen der
return
Stichwort zurückkehren würde, die Versprechen und dann würden Sie in der Lage sein, um die Kette-Handler, um Ihre Herz begehrt.OK, wie nutzen wir diese? Es ist eigentlich ziemlich einfach. Sie haben jetzt die Möglichkeit zu sagen, die
getData
Methode, etwas zu tun, wenn eine Antwort empfangen wurde (oder eine Ausnahme ausgelöst).Nur als Beispiel, man könnte dies in Ihrem Reagieren Komponente
componentWillMount
Methode.Können Sie auch die Kontrolle der be-Systemsteuerung, indem Sie ein flag in den Zustand vor der Anfrage und zurückzusetzen, nachdem die Anfrage (mit callbacks natürlich).
undefined
ist, gibt es einen Weg, um einePromise
Gegenzug, in diesem Fall?