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ück result dies ist async, so dass Sie nicht sehen result im componentDidMount.
  • Ich Verstand das problem, aber immer, wenn ich wieder ein Promise wie sollte ich mich informieren, Reagieren zu aktualisieren render() 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.
InformationsquelleAutor Tho Vo | 2016-08-05
Schreibe einen Kommentar