Share
Denne opplæringen vil lære deg hvordan du bruker Axios for å hente data og deretter hvordan du kan manipulere den og til slutt vise den på siden din med filtreringsfunksjonalitet. Du lærer hvordan du bruker kartet, filtrerer og inkluderer metoder underveis. Dessuten skal du opprette en høyere rekkefølge komponent (HOC) for å håndtere lastingstilstanden til de hentede dataene fra API-endepunktet.
La oss starte med en ren React-app. Jeg antar at du bruker create reagere-app, og filnavnene vil være i samsvar med sine utganger.
Vi trenger bare å installere Axios-modulen for denne opplæringen.
Gå til prosjektkatalogen din via terminalvinduet og skriv inn npm installere aksios-save for å installere Axios for prosjektet lokalt.
Vi bruker API for tilfeldig brukergenerator for å hente tilfeldig brukerinformasjon til bruk i vår søknad.
La oss legge til Axios-modulen i vår søknad ved å importere den til vår App.js fil.
importere aksios fra 'axios'
Random User Generator API tilbyr en rekke alternativer for å lage ulike typer data. Du kan sjekke dokumentasjonen for mer informasjon, men for denne opplæringen vil vi holde det enkelt.
Vi ønsker å hente ti forskjellige brukere, og vi trenger bare navnet, etternavnet og en unik ID, som kreves for React når du lager lister over elementer. For å gjøre anropet litt mer spesifikt, la oss inkludere nasjonalitetsalternativet som et eksempel.
Nedenfor er API som vi skal ringe for.
Legg merke til at jeg ikke brukte id alternativet som tilbys i API-en på grunn av at det noen ganger kommer tilbake null for noen brukere. Så, for å sikre at det blir en unik verdi for hver bruker, inkluderte jeg registrert alternativet i APIen.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
Du kan kopiere og lime det inn i nettleseren din, og du vil se de returnerte dataene i JSON-format.
Nå er det neste å lage en API-samtale gjennom Axios.
Først av alt, la oss lage en stat slik at vi kan lagre de hentede dataene.
Inne i vår app komponent, legg til en klassekonstruktør og deretter opprett tilstanden.
constructor (rekvisitter) super (rekvisitter) this.state = users: [], store: []
Her ser du brukere og butikk stater. En vil bli brukt til filtreringsformål og vil ikke bli redigert, og den andre vil holde filterresultatene som vil bli vist i DOM.
Nå gå videre og opprett componentDidMount () livscykluskrok.
I denne livscykluskroken henter vi dataene, og deretter ved å bruke kart metode, vil vi lage nye mellomliggende data som vi vil bruke inne i setState metode.
Hvis du sjekker resultatet av API-anropet i nettleseren din, ser du at det er først og siste nøkkelverdier par inne i Navn objekt, men ikke nøkkelverdier for et fullt navn. Så vi vil kombinere først og siste for å lage et fullt navn inne i et nytt JavaScript-objekt. Legg merke til at JSON og JavaScript Object er forskjellige ting, selv om de i utgangspunktet fungerer på samme måte.
La oss flytte trinn for trinn.
Legg til følgende kode i din app komponent.
Accentsconagua
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => console.log (json))Når du sjekker konsollen, vil du se en objektutgang. Hvis du åpner dette objektet, er det et annet objekt inni det som heter data, og inne data, er det en oppstilling som heter resultater.
La oss videre endre 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]. navn først)) Her nådde vi navnet på den første verdien i resultatlisten.
La oss nå bruke den innebygde kart Metode for JavaScript for å iterere gjennom hvert element inne i arrayet og opprette en ny rekke JavaScript-objekter med en ny struktur.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (resultat => ( navn: '$ result.name.first $ result.name.last', id: result.registered)) .then (newData => console.log (newData))Her kalte vi kart metode på json.data.results, som er en matrise, og deretter referert hvert element av arrayet som resultat (Legg merke til singular / flertallforskjellen). Deretter skapte vi et annet objekt ved å bruke nøkkelverdi-paret for hver gjenstand inne i arrayet Navn og id nøkkelverdier par.
På slutten brukte vi en annen deretter metode for å kunne se på våre nye data. Vi refererte det som NewData, og så loggte vi nettopp på konsollen for å se om alt gikk som planlagt.
Du bør se et nytt utvalg med objekter som har Navn og id parene.
I stedet for å logge resultatet til konsollen, må vi lagre det. For å gjøre det, vil vi bruke setState.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (resultat => ( navn: '$ result.name.first $ result.name.last', id: result.registered)) .then (newData => this.setState (users: newData, store: newData) ) .catch (error => alert (error))Her satt vi i utgangspunktet begge deler brukere og butikk data med vår nye NewData matrise.
Vi trenger to variabler på grunn av det faktum at vi må lagre de opprinnelige dataene og aldri miste det. Ved å bruke informasjonen inne i butikk stat, vi kan filtrere dataene og fylle ut brukere stat og vis den på siden. Dette blir tydeligere når vi implementerer filtreringsfunksjonaliteten.
Sist men ikke minst, la vi til å fange å faktisk fange eventuelle feil under henting og vise feilen som en varselmelding.
Ideen om filtrering er ganske enkel. Vi har vår butikk state, og det holder alltid de opprinnelige dataene uten å endre seg. Deretter ved å bruke filter Fungerer på denne tilstanden, får vi bare de matchende elementene og tilordner dem deretter til brukere stat.
this.state.store.filter (item => item.name.toLowerCase (). inkluderer (e.target.value.toLowerCase ()))
De filter Metode krever en funksjon som et argument, en funksjon som skal kjøres for hvert element i gruppen. Her refererer vi hvert element inne i arrayet som punkt. Så tar vi Navn nøkkel til hver punkt og konvertere den til små bokstaver for å gjøre vår filtreringsfunksjonalitet uforsiktig.
Etter at vi har Navn nøkkel for punkt, vi sjekker om denne inkluderer søkestrengen vi skrev inn. inkluderer er en annen innebygd JavaScript-metode. Vi sender søkestrengen skrevet i inntastingsfeltet som et argument til inkluderer, og den returnerer om denne strengen er inkludert i variabelen den ble påkalt. Igjen konverterer vi inngangsstrengen til små bokstaver, slik at det ikke spiller noen rolle om du skriver inn store eller små bokstaver.
Til slutt returnerer filtermetoden de matchende elementene. Så vi tar bare disse elementene og lagrer dem inni brukere staten gjennom setState.
Nedenfor finner du den endelige versjonen av funksjonen vi opprettet.
filternavn (e) this.setState (users: this.state.store.filter (item => item.name.toLowerCase (). inkluderer (e.target.value.toLowerCase ())))
Selv om for dette lille eksempelet kunne vi sette alt inni app komponent, la oss dra nytte av React og lage noen små funksjonelle / statløse komponenter.
La oss legge til følgende struktur i gjengi metode av app komponent.
render () const users = this.state return ();NAVNELISTEthis.filterNames (e) />
For tiden vil vi bare fokusere på funksjonaliteten. Senere vil jeg gi CSS-filen jeg har opprettet.
Legg merke til at vi har searchFunc prop for Søkelinje komponent og brukernavn prop for Liste komponent.
Legg merke til at vi bruker brukere stat istedenfor butikk stat for å vise dataene fordi brukere tilstand er den som inneholder de filtrerte resultatene.
Denne komponenten er ganske enkel. Det tar bare filterNames Fungerer som en propp og kaller denne funksjonen når inngangsfeltet endres.
importere React fra 'react' const SearchBar = props => return () eksporter standard SearchBar
Denne vil bare liste navnene til brukerne.
Import React, Component fra "reagere" import LoadingHOC fra './LoadingHOC' import '... /styles/main.css' const List = (rekvisitter) => const brukernavn = rekvisitter returnere
Her brukte vi igjen kart metode for å få hvert element i matrisen og opprette en element ut av det. Legg merke til at når du bruker kart For å lage en liste over elementer må du bruke en nøkkel for at React skal kunne følge med på hvert listeelement.
Legg merke til at vi pakket inn Liste med en annen komponent som heter LoadingHOC før du eksporterer den. Slik fungerer Høyere-Bestandskomponenter (HOCs).
Det vi gjorde her er å sende vår komponent som et argument til en annen komponent før du eksporterer den. Så dette LoadingHOC komponenten vil være styrke vår komponent med nye funksjoner.
Som jeg forklart kort før, tar en HOC en komponent som en inngang og eksporterer deretter en forbedret versjon av inngangskomponenten.
Import React, Component fra 'React' import spinner fra '... /spinner.gif' const LoadingHOC = (WrappedState) => retur (klasse LoadingHOC utvider komponent render () return this.props.usernames.length == = 0 ?:
) eksport standard LoadingHOC
Inne i HOC kan vi få tilgang til rekvisitter av inngangskomponenten. Så vi bare sjekke om lengden på brukernavn prop er 0 eller ikke. Hvis det er 0, Dette betyr at dataene ennå ikke skal hentes fordi det er en tom rekkefølge som standard. Så vi viser bare en spinner GIF som vi importerte. Ellers viser vi bare inngangskomponenten selv.
Det er importert for ikke å glemme å passere noen rekvisitter og angir tilbake til inngangskomponenten med en spredningsoperatør. Ellers vil komponenten bli fratatt dem.
Nedenfor finner du CSS-filen som er spesifikk for dette eksemplet.
kropp, html -webkit-font-utjevning: antialiased; margin: 0; polstring: 0; bakgrunnsfarge: # f1f1f1; font-familie: 'Raleway', sans-serif; -webkit-tekststørrelsesjustering: 100%; kropp display: flex; begrunn-innhold: center; skriftstørrelse: 1rem / 16; margin-topp: 50px; li, ul listestil: none; margin: 0; polstring: 0; ul margin-top: 10px; li font-size: 0.8rem; margin-bunn: 8px; tekst-align: center; farge: # 959595; li: siste-of-type margin-bunn: 50px; .Kort font-size: 1.5rem; font-weight: bold; display: flex; flex-retning: kolonne; justeringselementer: center; bredde: 200px; border-radius: 10px; bakgrunnsfarge: hvit; boks-skygge: 0 5px 3px 0 #ebebeb; .header posisjon: relative; skriftstørrelse: 20px; margin: 12px 0; farge: # 575757; .header :: etter innhold: "; posisjon: absolutt; venstre: -50%; bunn: -10px; bredde: 200%; høyde: 1px; bakgrunnsfarge: # f1f1f1; .searchBar text-align: senter: margin: 5px 0; grense: 1px solid # c4c4c4; høyde: 20px; farge: # 575757; border-radius: 3px; .searchBar: fokus outline-width: 0; .searchBar :: placeholder color: #dadada; .isLading margin: 30px 0; width: 150px; filter: opacity (0.3);
Gjennom denne opplæringen tok vi en rask titt på Random User Generator API som en kilde til tilfeldige data. Da hentet vi dataene fra et API-endepunkt og omstrukturerte resultatene i et nytt JavaScript-objekt med kart metode.
Det neste var å lage en filtreringsfunksjon med filter og inkluderer metoder. Til slutt opprettet vi to forskjellige komponenter og forbedret en av dem med en høyere rekkefølge komponent (HOC) ved å innføre en lastindikator når dataene ikke er der ennå.
I løpet av de siste par årene har React vokst i popularitet. Faktisk har vi en rekke elementer i Envato Market som er tilgjengelige for kjøp, gjennomgang, implementering og så videre. Hvis du leter etter flere ressurser rundt React, ikke nøl med å sjekke dem ut.
