Share
Questo tutorial ti insegnerà come usare Axios per recuperare i dati e poi come manipolarli e eventualmente visualizzarli sulla tua pagina con funzionalità di filtraggio. Imparerai come usare la mappa, filtrare e includere i metodi lungo la strada. Inoltre, verrà creato un componente ordine superiore (HOC) per gestire lo stato di caricamento dei dati recuperati dall'endpoint API.
Iniziamo con un'app React pulita. Presumo tu usi Create-reagiscono-app, e i nomi dei file saranno in accordo con le sue uscite.
Abbiamo solo bisogno di installare il modulo Axios per questo tutorial.
Vai alla directory del tuo progetto attraverso la finestra del terminale e poi digita npm install axios -save per installare Axios per il tuo progetto localmente.
Utilizzeremo l'API Random User Generator per recuperare informazioni utente casuali da utilizzare nella nostra applicazione.
Aggiungiamo il modulo Axios alla nostra applicazione importandolo nel nostro App.js file.
importare assiomi da "assiomi"
L'API Generatore utenti casuali offre una serie di opzioni per la creazione di vari tipi di dati. Puoi controllare la documentazione per ulteriori informazioni, ma per questo tutorial, lo terremo semplice.
Vogliamo recuperare dieci diversi utenti e abbiamo solo bisogno del nome, del cognome e di un ID univoco, che è necessario per React quando si creano elenchi di elementi. Inoltre, per rendere la chiamata un po 'più specifica, includiamo l'opzione nazionalità come esempio.
Di seguito è l'API che effettueremo una chiamata.
Si noti che non ho usato il id opzione fornita nell'API a causa del fatto che a volte ritorna nullo per alcuni utenti. Quindi, solo per assicurarmi che ci sia un valore unico per ogni utente, ho incluso il registrato opzione nell'API.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
Puoi copiarlo e incollarlo nel tuo browser e vedrai i dati restituiti in formato JSON.
Ora, la prossima cosa è fare una chiamata API attraverso Axios.
Prima di tutto, creiamo uno stato in modo che possiamo memorizzare i dati recuperati.
Dentro il nostro App componente, aggiungere un costruttore di classi e quindi creare lo stato.
costruttore (oggetti di scena) super (props) this.state = users: [], store: []
Qui vedi utenti e memorizzare stati. Uno sarà usato per scopi di filtraggio e non sarà modificato e l'altro conterrà i risultati del filtro che verranno mostrati nel DOM.
Ora vai avanti e crea il componentDidMount () gancio del ciclo di vita.
All'interno di questo hook del ciclo di vita, recupereremo i dati e quindi utilizzando il carta geografica metodo, creeremo nuovi dati intermedi che useremo all'interno del setState metodo.
Se controlli il risultato della chiamata API nel tuo browser, vedrai che ci sono primo e scorso coppie chiave-valore all'interno del nome oggetto ma nessuna coppia chiave-valore per un nome completo. Quindi ci uniremo primo e scorso per creare un nome completo all'interno di un nuovo oggetto JavaScript. Nota che JSON e JavaScript Object sono cose diverse, anche se fondamentalmente funzionano nello stesso modo.
Spostiamoci passo dopo passo.
Aggiungi il seguente codice al tuo App componente.
Accentsconagua
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json))Quando controlli la console, vedrai un output dell'oggetto. Se apri questo oggetto, c'è un altro oggetto al suo interno chiamato dati, e dentro i dati, c'è una matrice chiamata risultati.
Cambiamo ulteriormente il 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]. prima il nome)) Qui abbiamo raggiunto il nome del primo valore all'interno della matrice dei risultati.
Ora usiamo il built-in carta geografica metodo di JavaScript per iterare attraverso ogni elemento all'interno della matrice e creare una nuova serie di oggetti JavaScript con una nuova struttura.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (risultato => ( nome: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => console.log (newData))Qui, abbiamo chiamato il carta geografica metodo attivo json.data.results, che è un array, e quindi ha fatto riferimento a ciascun elemento dell'array come risultato (notare la differenza singolare / plurale). Quindi, usando la coppia chiave-valore di ogni oggetto all'interno della matrice, abbiamo creato un altro oggetto con nome e id coppie chiave-valore.
Alla fine ne abbiamo usato un altro poi metodo per poter fare riferimento ai nostri nuovi dati. Lo abbiamo indicato come newData, e poi abbiamo appena effettuato l'accesso alla console per vedere se tutto è andato come previsto.
Dovresti vedere un nuovo array con oggetti che hanno nome e id coppie.
Invece di registrare il risultato nella console, dobbiamo memorizzarlo. Per fare ciò, useremo setState.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (risultato => ( nome: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (users: newData, store: newData) ) .catch (errore => avviso (errore))Qui, inizialmente abbiamo impostato entrambi utenti e memorizzare dati con i nostri nuovi newData schieramento.
Abbiamo bisogno di due variabili dovute al fatto che abbiamo bisogno di memorizzare i dati originali e non dovremmo mai perderli. Usando le informazioni all'interno del memorizzare stato, possiamo filtrare i dati e quindi compilare il utenti stato e mostralo sulla pagina. Questo sarà più chiaro quando implementeremo la funzionalità di filtro.
Ultimo ma non meno importante, abbiamo aggiunto catturare per rilevare effettivamente eventuali errori durante il recupero e visualizzare l'errore come messaggio di avviso.
L'idea di filtrare è abbastanza semplice. Abbiamo il nostro memorizzare stato, e mantiene sempre i dati originali senza modifiche. Quindi, usando il filtro funzione su questo stato, otteniamo solo gli elementi corrispondenti e quindi li assegniamo al utenti stato.
this.state.store.filter (item => item.name.toLowerCase (). includes (e.target.value.toLowerCase ()))
Il filtro il metodo richiede una funzione come argomento, una funzione da eseguire per ogni elemento dell'array. Qui rimandiamo ogni elemento all'interno dell'array come articolo. Quindi prendiamo il nome chiave di ciascuno articolo e convertirlo in minuscolo per rendere la nostra funzionalità di filtraggio non sensibile alla maiuscole / minuscole.
Dopo aver avuto il nome chiave per il articolo, controlliamo se questo include la stringa di ricerca che abbiamo digitato. include è un altro metodo JavaScript incorporato. Passiamo la stringa di ricerca digitata nel campo di input come argomento a include, e restituisce se questa stringa è inclusa nella variabile su cui è stato chiamato. Di nuovo, convertiamo la stringa di input in lettere minuscole in modo che non importi se digiti input maiuscoli o minuscoli.
Alla fine, il metodo filter restituisce gli elementi corrispondenti. Quindi prendiamo semplicemente questi elementi e li memorizziamo nel utenti stato attraverso setState.
Di seguito puoi trovare la versione finale della funzione che abbiamo creato.
filterNames (e) this.setState (users: this.state.store.filter (item => item.name.toLowerCase (). includes (e.target.value.toLowerCase ())))
Anche se per questo piccolo esempio potremmo mettere tutto dentro il App componente, approfittiamo di React e rendiamo alcuni piccoli componenti funzionali / stateless.
Aggiungiamo la seguente struttura al rendere metodo del App componente.
render () const users = this.state return ();LISTA DI NOMIthis.filterNames (e) />
Per il momento, ci concentreremo solo sulla funzionalità. Successivamente, fornirò il file CSS che ho creato.
Si noti che abbiamo il searchFunc prop per il Barra di ricerca componente e il nomi utente prop per il Elenco componente.
Nota che usiamo il utenti stato invece del memorizzare stato per mostrare i dati perché il utenti lo stato è quello che contiene i risultati filtrati.
Questo componente è abbastanza semplice. Ci vuole solo il filterNames funziona come sostegno e chiama questa funzione quando il campo di input cambia.
import Reagire da 'react' const SearchBar = props => return () exportBar di ricerca predefinito
Questo semplicemente elenca i nomi degli utenti.
import React, Component da 'react' import LoadingHOC da './LoadingHOC' import '... /styles/main.css' const List = (props = = const nomi utente = props return (
Qui, abbiamo di nuovo usato il carta geografica metodo per ottenere ogni elemento nell'array e creare un oggetto fuori di esso. Si noti che quando si utilizza carta geografica per creare un elenco di elementi, devi usare a chiave in modo che React tenga traccia di ogni voce dell'elenco.
Notare che abbiamo avvolto Elenco con un altro componente chiamato LoadingHOC prima di esportarlo. Questo è il modo in cui funzionano i componenti di ordine superiore (HOC).
Quello che abbiamo fatto qui è passare il nostro componente come argomento a un altro componente prima di esportarlo. Così questo LoadingHOC componente sarà migliorando il nostro componente con nuove funzionalità.
Come ho spiegato brevemente in precedenza, un HOC prende un componente come input e quindi esporta una versione avanzata del componente di input.
import React, Component da 'react' import spinner da '... /spinner.gif' const LoadingHOC = (WrappedState) => return (la classe LoadingHOC estende Component render () return this.props.usernames.length == = 0 ?:
) esportazione default LoadingHOC
All'interno dell'HOC, possiamo accedere direttamente agli oggetti di scena del componente di input. Quindi controlliamo solo se la lunghezza del file nomi utente il prop è 0 o no. Se è 0, questo significa che i dati devono ancora essere recuperati perché è un array vuoto per impostazione predefinita. Quindi mostriamo solo una GIF spinner che abbiamo importato. Altrimenti, mostriamo solo il componente di input stesso.
Viene importato per non dimenticare di passare alcun oggetto di scena e gli stati di nuovo al componente di input con un operatore di diffusione. Altrimenti, il tuo componente verrebbe privato di loro.
Di seguito puoi trovare il file CSS specifico per questo esempio.
body, html -webkit-font-smoothing: antialiased; margine: 0; padding: 0; background-color: # f1f1f1; font-family: 'Raleway', sans-serif; -webkit-text-size-adjust: 100%; body display: flex; justify-content: center; font-size: 1rem / 16; margin-top: 50px; li, ul list-style: none; margine: 0; padding: 0; ul margin-top: 10px; li dimensione font: 0.8rem; margin-bottom: 8px; allineamento del testo: centro; colore: # 959595; li: last-of-type margin-bottom: 50px; .Card font-size: 1.5rem; font-weight: bold; display: flex; direzione della flessione: colonna; align-items: center; larghezza: 200 px; border-radius: 10px; colore di sfondo: bianco; box-shadow: 0 5px 3px 0 #ebebeb; .header position: relative; font-size: 20px; margine: 12px 0; colore: # 575757; .header :: after content: "; position: absolute; left: -50%; bottom: -10px; width: 200%; height: 1px; background-color: # f1f1f1; .searchBar text-align: center; margin: 5px 0; border: 1px solid # c4c4c4; height: 20px; color: # 575757; border-radius: 3px; .searchBar: focus outline-width: 0; .searchBar :: placeholder color: #dadada; .isLoading margin: 30px 0; width: 150px; filter: opacity (0.3);
Durante questo tutorial, abbiamo dato una rapida occhiata all'API Generatore utenti casuali come fonte di dati casuali. Quindi abbiamo recuperato i dati da un endpoint API e ristrutturato i risultati all'interno di un nuovo oggetto JavaScript con carta geografica metodo.
La prossima cosa era creare una funzione di filtro con il filtro e include metodi. Infine, abbiamo creato due diversi componenti e ne abbiamo potenziato uno con un componente di ordine superiore (HOC) introducendo un indicatore di caricamento quando i dati non sono ancora presenti.
Negli ultimi due anni, React è cresciuto in popolarità. In effetti, abbiamo un numero di articoli nel mercato Envato che sono disponibili per l'acquisto, la revisione, l'implementazione e così via. Se stai cercando risorse aggiuntive intorno a React, non esitare a verificarle.
