Share
In diesem Lernprogramm erfahren Sie, wie Sie mit Axios Daten abrufen, sie bearbeiten und anschließend mit Filterfunktionen auf Ihrer Seite anzeigen. Sie werden lernen, wie Sie die Karte, die Filter und die Methoden auf dem Weg verwenden. Darüber hinaus erstellen Sie eine Komponente höherer Ordnung (HOC), die den Ladezustand der abgerufenen Daten vom API-Endpunkt abwickelt.
Beginnen wir mit einer sauberen React-App. Ich nehme an, Sie verwenden Create-React-App, und die Dateinamen stimmen mit ihren Ausgaben überein.
Wir müssen nur das Axios-Modul für dieses Tutorial installieren.
Gehen Sie durch das Terminalfenster in Ihr Projektverzeichnis und geben Sie dann ein npm installiere axios -save um Axios lokal für Ihr Projekt zu installieren.
Wir werden die Random User Generator API verwenden, um zufällige Benutzerinformationen zur Verwendung in unserer Anwendung abzurufen.
Fügen wir das Axios-Modul unserer Anwendung hinzu, indem wir es in unsere importieren App.js Datei.
importiere axios aus 'axios'
Die Random User Generator-API bietet eine Reihe von Optionen zum Erstellen verschiedener Datentypen. Sie können in der Dokumentation nach weiteren Informationen suchen. Für dieses Lernprogramm halten wir es jedoch einfach.
Wir möchten zehn verschiedene Benutzer abrufen, und wir benötigen nur den Namen, den Nachnamen und eine eindeutige ID, die für das React beim Erstellen von Elementlisten erforderlich ist. Um den Anruf etwas konkreter zu machen, nehmen wir als Beispiel die Nationalitätsoption auf.
Nachfolgend finden Sie die API, für die wir einen Aufruf machen.
Beachten Sie, dass ich das nicht verwendet habe Ich würde Diese Option ist in der API enthalten, da sie manchmal zurückgegeben wird Null für einige Benutzer. Um sicherzugehen, dass es für jeden Benutzer einen eindeutigen Wert gibt, habe ich die Eingetragen Option in der API.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
Sie können es kopieren und in Ihren Browser einfügen. Die zurückgegebenen Daten werden im JSON-Format angezeigt.
Als Nächstes führen Sie einen API-Aufruf über Axios durch.
Zunächst einmal erstellen wir einen Zustand, in dem die abgerufenen Daten gespeichert werden können.
In unserem App Fügen Sie einen Klassenkonstruktor hinzu und erstellen Sie den Zustand.
Konstruktor (Requisiten) Super (Requisiten) this.state = Benutzer: [], Speicher: []
Hier siehst du Benutzer und Geschäft Zustände. Eine wird zu Filterzwecken verwendet und nicht bearbeitet, und die andere enthält die Filterergebnisse, die im DOM angezeigt werden.
Nun machen Sie weiter und erstellen Sie die componentDidMount () Lebenszyklus-Haken.
In diesem Lebenszyklus-Hook holen wir die Daten ab und verwenden dann die Karte werden wir neue Zwischendaten erstellen, die wir in der verwenden werden setState Methode.
Wenn Sie das Ergebnis des API-Aufrufs in Ihrem Browser überprüfen, werden Sie feststellen, dass dies der Fall ist zuerst und zuletzt Schlüsselwertpaare innerhalb der Name Objekt, aber kein Schlüsselwertpaar für einen vollständigen Namen. Also werden wir kombinieren zuerst und zuletzt So erstellen Sie einen vollständigen Namen in einem neuen JavaScript-Objekt. Beachten Sie, dass JSON und JavaScript-Objekt unterschiedliche Dinge sind, obwohl sie grundsätzlich auf dieselbe Weise funktionieren.
Lass uns Schritt für Schritt vorgehen.
Fügen Sie folgenden Code hinzu App Komponente.
Accentsconagua
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json))Wenn Sie die Konsole überprüfen, wird eine Objektausgabe angezeigt. Wenn Sie dieses Objekt öffnen, gibt es ein anderes Objekt mit dem Namen Daten, und innerhalb von Daten gibt es ein Array namens Ergebnisse.
Lass uns das weiter ändern console.log (json).
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json.data.results [0]). Name zuerst)) Hier haben wir den Namen des ersten Werts innerhalb des Ergebnisfeldes erreicht.
Lassen Sie uns nun das eingebaute verwenden Karte Methode von JavaScript, um jedes Element innerhalb des Arrays zu durchlaufen und ein neues Array von JavaScript-Objekten mit einer neuen Struktur zu erstellen.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (Ergebnis => ( name: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => console.log (newData))Hier haben wir angerufen Karte Methode auf json.data.Ergebnisse, Welches ist ein Array, und bezeichnet dann jedes Element des Arrays als Ergebnis (Beachten Sie den Unterschied zwischen Singular und Plural). Dann haben wir mit dem Schlüssel-Wert-Paar jedes Objekts innerhalb des Arrays ein anderes Objekt mit erstellt Name und Ich würde Schlüsselwertpaare.
Am Ende haben wir eine andere verwendet dann Methode, um auf unsere neuen Daten verweisen zu können. Wir haben es als bezeichnet neue Daten, und dann haben wir uns nur bei der Konsole angemeldet, um zu sehen, ob alles wie geplant lief.
Sie sollten ein neues Array mit Objekten sehen Name und Ich würde Paare.
Anstatt das Ergebnis in der Konsole zu protokollieren, müssen wir es speichern. Um dies zu tun, werden wir verwenden setState.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (Ergebnis => ( name: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (Benutzer: newData, store: newData) ) .catch (Fehler => Warnung (Fehler))Hier setzen wir zunächst beide Benutzer und Geschäft Daten mit unseren neuen neue Daten Array.
Wir benötigen zwei Variablen, weil wir die Originaldaten speichern müssen und niemals verlieren sollten. Durch die Verwendung der Informationen im Geschäft können wir die Daten filtern und dann die Benutzer Zustand und zeigen Sie es auf der Seite. Dies wird klarer, wenn wir die Filterfunktion implementieren.
Nicht zuletzt haben wir hinzugefügt Fang um mögliche Fehler beim Abrufen tatsächlich abzufangen und den Fehler als Warnmeldung anzuzeigen.
Die Idee des Filterns ist ziemlich einfach. Wir haben unsere Geschäft Status, und es behält immer die ursprünglichen Daten, ohne sich zu ändern. Dann mit der Filter In diesem Zustand erhalten wir nur die passenden Elemente und weisen sie dann dem zu Benutzer Zustand.
this.state.store.filter (item => item.name.toLowerCase (). umfasst (e.target.value.toLowerCase ()))
Das Filter method erfordert eine Funktion als Argument, eine Funktion, die für jedes Element im Array ausgeführt wird. Hier beziehen wir uns auf jedes Element innerhalb des Arrays als Artikel. Dann nehmen wir die Name Schlüssel von jedem Artikel und konvertieren Sie es in Kleinschreibung, um die Filterfunktion unempfindlich zu machen.
Nachdem wir die haben Name Schlüssel für die Artikel, wir prüfen, ob dies eine ist beinhaltet Die Suchzeichenfolge, die wir eingegeben haben. beinhaltet ist eine andere integrierte JavaScript-Methode. Die im Eingabefeld eingegebene Suchzeichenfolge übergeben wir als Argument an beinhaltet, und gibt zurück, ob diese Zeichenfolge in der Variablen enthalten ist, für die sie aufgerufen wurde. Wir konvertieren die Eingabezeichenfolge erneut in Kleinbuchstaben, sodass es egal ist, ob Sie Groß- oder Kleinbuchstaben eingeben.
Am Ende gibt die Filtermethode die passenden Elemente zurück. Also nehmen wir diese Elemente einfach und speichern sie im Benutzer Zustand durch setState.
Nachfolgend finden Sie die endgültige Version der von uns erstellten Funktion.
filterNames (e) this.setState (Benutzer: this.state.store.filter (item => item.name.toLowerCase (). umfasst (e.target.value.toLowerCase ())))
Obwohl wir für dieses kleine Beispiel alles in den Computer einfügen konnten App Lassen Sie uns von React profitieren und einige kleine funktionale / zustandslose Komponenten herstellen.
Fügen wir folgende Struktur hinzu machen Methode der App Komponente.
render () const users = this.state return ();NAMENSLISTEthis.filterNames (e) />
Im Moment konzentrieren wir uns nur auf die Funktionalität. Später werde ich die von mir erstellte CSS-Datei bereitstellen.
Beachten Sie, dass wir die haben searchFunc Stütze für die Suchleiste Komponente und die Benutzernamen Stütze für die Liste Komponente.
Beachten Sie, dass wir das verwenden Benutzer Zustand statt der Geschäft Status, um die Daten anzuzeigen, da die Benutzer state ist derjenige, der die gefilterten Ergebnisse enthält.
Diese Komponente ist sehr einfach. Es dauert nur die filterNames Funktion als Requisite und ruft diese Funktion auf, wenn sich das Eingabefeld ändert.
importieren Reagieren von 'reagieren' const SearchBar = Requisiten => return () Standard-Suchleiste exportieren
Dieser listet einfach die Namen der Benutzer auf.
import React, Component aus 'reagieren' importieren LoadingHOC aus './LoadingHOC' import '… /styles/main.css' const List = (Requisiten) => const usernames = Requisiten zurückgeben (
Hier haben wir wieder die verwendet Karte Methode, um jedes Element im Array abzurufen und eine Artikel aus ihm heraus. Beachten Sie dies, wenn Sie verwenden Karte Um eine Liste der Elemente zu erstellen, müssen Sie ein verwenden Schlüssel damit React jedes Listenelement verfolgt.
Beachten Sie, dass wir verpackt haben Liste mit einer anderen Komponente namens LoadingHOC vor dem Exportieren. So funktionieren Komponenten höherer Ordnung (HOC).
Was wir hier gemacht haben, ist, unsere Komponente als Argument an eine andere Komponente zu übergeben, bevor Sie sie exportieren. Also das LoadingHOC Komponente wird sein verbessern unsere Komponente mit neuen Funktionen.
Wie ich zuvor kurz erklärt habe, nimmt ein HOC eine Komponente als Eingabe und exportiert dann eine erweiterte Version der Eingabekomponente.
import React, Component aus 'reagieren' Spinner importieren aus '… /spinner.gif' const LoadingHOC = (WrappedState) => return (Klasse LoadingHOC erweitert Component render () return this.props.usernames.length == = 0 ?:
) Standard-LoadingHOC exportieren
Innerhalb des HOC können wir direkt auf die Requisiten der Eingabekomponente zugreifen. Wir prüfen also nur, ob die Länge der Benutzernamen Stütze ist 0 oder nicht. Wenn es so ist 0, Dies bedeutet, dass die Daten noch nicht abgerufen werden müssen, da sie standardmäßig ein leeres Array sind. Wir zeigen also nur ein Spinner-GIF, das wir importiert haben. Ansonsten zeigen wir nur die Eingabekomponente selbst.
Es wird importiert, um nicht zu vergessen, Requisiten und Zustände mit einem Verteilungsoperator an die Eingabekomponente zurückzugeben. Andernfalls würde Ihre Komponente davon beraubt.
Unten finden Sie die CSS-Datei, die für dieses Beispiel spezifisch ist.
body, html -webkit-font-smoothing: antialiased; Marge: 0; Polsterung: 0; Hintergrundfarbe: # f1f1f1; Schriftfamilie: 'Raleway', serifenlos; -webkit-Textgrößenanpassung: 100%; body display: flex; Inhalt rechtfertigen: Mitte; Schriftgröße: 1rem / 16; Rand oben: 50px; li, ul list-style: none; Marge: 0; Polsterung: 0; ul margin-top: 10px; li font-size: 0.8rem; Rand unten: 8px; Text ausrichten: Mitte; Farbe: # 959595; li: last-of-type margin-bottom: 50px; .Card font-size: 1.5rem; Schriftdicke: fett; Anzeige: Flex; Flex-Richtung: Spalte; Ausrichten-Elemente: Mitte; Breite: 200px; Grenzradius: 10px; Hintergrundfarbe: weiß; Box-Schatten: 0 5px 3px 0 #ebeb; .header position: relativ; Schriftgröße: 20px; Marge: 12px 0; Farbe: # 575757; .header :: after content: "; Position: absolut; links: -50%; unten: -10px; Breite: 200%; Höhe: 1px; Hintergrundfarbe: # f1f1f1; .searchBar text-align: Mitte; Rand: 5px 0; Rand: 1px durchgehend # c4c4c4; Höhe: 20px; Farbe: # 575757; Randradius: 3px; .searchBar: Fokus Umrissbreite: 0; .searchBar :: Platzhalter Farbe: #dadada; .isLoading margin: 30px 0; width: 150px; filter: Deckkraft (0,3);
In diesem Tutorial haben wir uns kurz die Random User Generator-API als Zufallsquelle angesehen. Dann holten wir die Daten von einem API-Endpunkt und strukturierten die Ergebnisse in einem neuen JavaScript-Objekt mit dem Karte Methode.
Als nächstes wurde mit dem Filter eine Filterfunktion erstellt Filter und beinhaltet Methoden. Schließlich haben wir zwei verschiedene Komponenten erstellt und eine mit einer Komponente höherer Ordnung (HOC) verbessert, indem ein Ladeindikator eingeführt wurde, wenn die Daten noch nicht vorhanden sind.
In den letzten Jahren hat React an Popularität gewonnen. Tatsächlich haben wir eine Reihe von Artikeln in Envato Market, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.
