Share
Denna handledning lär dig hur du använder Axios för att hämta data och sedan hur man manipulerar den och så småningom visar den på din sida med filtreringsfunktionalitet. Du lär dig hur du använder kartan, filtrerar och innehåller metoder på vägen. Dessutom skapar du en högre orderkomponent (HOC) för att hantera laddningstillståndet för den hämtade data från API-ändpunkten.
Låt oss börja med en ren React app. Jag antar att du använder skapa reagera-app, och filnamnen kommer att överensstämma med sina utgångar.
Vi behöver bara installera Axios-modulen för denna handledning.
Gå till din projektkatalog via terminalfönstret och skriv sedan in npm installera axios -save för att installera Axios för ditt projekt lokalt.
Vi kommer att använda Random User Generator API för att hämta slumpmässig användarinformation som ska användas i vår applikation.
Låt oss lägga till Axios-modulen i vår ansökan genom att importera den till vår App.js fil.
importera axier från "axios"
Random User Generator API erbjuder en massa alternativ för att skapa olika typer av data. Du kan kontrollera dokumentationen för mer information, men för den här handledningen kommer vi att hålla det enkelt.
Vi vill hämta tio olika användare, och vi behöver bara namnet, efternamnet och ett unikt ID, vilket krävs för React när du skapar listor över element. För att göra samtalet lite mer specifikt, låt oss inkludera nationalitetsalternativet som ett exempel.
Nedan är det API som vi kommer att ringa till.
Observera att jag inte använde id alternativet som tillhandahålls i API på grund av att det ibland återkommer null för vissa användare. Så, för att se till att det blir ett unikt värde för varje användare, inkluderade jag registrerad alternativet i API: n.
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
Du kan kopiera och klistra in den i din webbläsare och du kommer att se den returnerade data i JSON-format.
Nu är nästa sak att göra ett API-samtal via Axios.
Först av allt, låt oss skapa en stat så att vi kan lagra den hämtade data.
Inuti vårt App komponent, lägg till en klasskonstruktor och skapa sedan tillståndet.
konstruktör (rekvisita) super (rekvisita) this.state = users: [], store: []
Här ser du användare och Lagra stater. En kommer att användas för filtreringsändamål och kommer inte att redigeras, och den andra kommer att hålla de filterresultat som visas i DOM.
Nu fortsätt och skapa componentDidMount () livscykelkrok.
Inuti denna livscykelkrok hämtar vi data, och sedan genom att använda Karta metod kommer vi att skapa nya mellanliggande data som vi kommer att använda inuti sets metod.
Om du kontrollerar resultatet av API-samtalet i din webbläsare ser du att det finns först och sista nyckelvärdespar inuti namn objekt men ingen nyckelvärdespar för ett fullständigt namn. Så vi kommer att kombinera först och sista för att skapa ett fullständigt namn i ett nytt JavaScript-objekt. Observera att JSON och JavaScript Object är olika saker, även om de i princip fungerar på samma sätt.
Låt oss flytta steg för steg.
Lägg till följande kod till 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 kontrollerar konsolen ser du en objektutmatning. Om du öppnar det här objektet finns det ett annat objekt inom namnet data, och inuti data finns en array som heter resultat.
Låt oss ytterligare ändra 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]. namn först)) Här nådde vi namnet på det första värdet inuti resultatmatrisen.
Låt oss nu använda den inbyggda Karta Metod för JavaScript för att iterera genom varje element inuti arrayen och skapa en ny uppsättning JavaScript-objekt med en ny struktur.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (result => ( namn: '$ result.name.first $ result.name.last', id: result.registered)) .then (newData => console.log (newData))Här kallade vi Karta metod på json.data.results, vilken är en array, och hänvisade sedan varje element i arrayen som resultat (notera singular / plural skillnad). Sedan skapade vi ett annat objekt med hjälp av nyckelvärdesparet för varje objekt i matrisen namn och id nyckelvärdespar.
I slutet använde vi en annan sedan metod för att kunna hänvisa till vår nya data. Vi hänvisade det till NewData, och då loggade vi bara till konsolen för att se om allt gick som planerat.
Du borde se en ny array med objekt som har namn och id par.
Istället för att logga resultatet till konsolen måste vi lagra det. För att göra det ska vi använda sets.
componentDidMount () axios.get ('https://randomuser.me/api/?results=10&inc=name,registered&nat=fr') .then (json => json.data.results.map (result => ( namn: '$ result.name.first $ result.name.last', id: result.registered))) .then (newData => this.setState (users: newData, store: newData) ) .catch (error => alert (error))Här satte vi ursprungligen båda användare och Lagra data med vårt nya NewData array.
Vi behöver två variabler på grund av det faktum att vi måste lagra originaldata och aldrig förlora det. Genom att använda informationen inuti Lagra state, vi kan filtrera data och sedan fylla i användare visa och visa den på sidan. Detta blir tydligare när vi implementerar filtreringsfunktionaliteten.
Sist men inte minst lade vi till fånga att faktiskt fånga eventuella fel vid hämtning och visa felet som ett varningsmeddelande.
Tanken med filtrering är ganska enkel. Vi har vårt Lagra state, och det håller alltid ursprungliga data utan att ändra. Då, genom att använda filtrera funktionen i detta tillstånd får vi bara matchande element och tilldelar dem sedan till användare stat.
this.state.store.filter (item => item.name.toLowerCase (). innehåller (e.target.value.toLowerCase ()))
De filtrera Metoden kräver en funktion som ett argument, en funktion som ska köras för varje element i matrisen. Här hänvisar vi varje element inuti arrayen som Artikel. Då tar vi namn nyckeln till varje Artikel och konvertera det till små bokstäver för att göra vår filterfunktionalitet sak okänslig.
Efter att vi har namn nyckel för Artikel, vi kolla om den här innefattar söksträngen vi skrev in. innefattar är en annan inbyggd JavaScript-metod. Vi skickar söksträngen som skrivits i inmatningsfältet som ett argument till innefattar, och returnerar om den här strängen ingår i variabeln som den anropades på. Återigen omvandlar vi inmatningssträngen till små bokstäver så att det inte spelar någon roll om du skriver in övre eller små bokstäver.
I slutändan returnerar filtermetoden matchningselementen. Så vi tar helt enkelt dessa element och lagrar dem inuti användare tillstånd genom sets.
Nedan hittar du den slutliga versionen av den funktion som vi skapade.
filternamn (e) this.setState (users: this.state.store.filter (item => item.name.toLowerCase (). innehåller (e.target.value.toLowerCase ())))
Även om för det här lilla exemplet kunde vi sätta allt inne i App komponent, låt oss dra nytta av React och göra några små funktionella / statslösa komponenter.
Låt oss lägga till följande struktur i göra metod för App komponent.
render () const users = this.state return ();NAMNLISTAthis.filterNames (e) />
För närvarande fokuserar vi bara på funktionaliteten. Senare kommer jag att tillhandahålla den CSS-fil jag har skapat.
Observera att vi har searchFunc prop för Sökruta komponent och användarnamn prop för Lista komponent.
Observera att vi använder användare stat istället för Lagra tillstånd att visa data eftersom användare tillståndet är den som innehåller de filtrerade resultaten.
Denna komponent är ganska enkel. Det tar bara filterNames fungera som stöt och kallar den här funktionen när inmatningsfältet ändras.
importera Reakt från "reagera" const SearchBar = props => return () exportera standard SearchBar
Den här kommer helt enkelt att lista namnen på användarna.
importreakt, komponent från "reagera" import LoadingHOC från './LoadingHOC' import '... /styles/main.css' const List = (rekvisita) => const användarnamn = rekvisita returnerar
Här använde vi igen Karta metod för att få varje objekt i matrisen och skapa en föremål ut ur det. Observera att när du använder Karta För att skapa en lista med objekt måste du använda en nyckel- för att React ska kunna hålla reda på varje listobjekt.
Lägg märke till att vi förpackade Lista med en annan komponent som heter LoadingHOC innan du exporterar den. Så här fungerar Högbeställningskomponenter (HOC).
Vad vi gjorde här är att skicka vår komponent som argument till en annan komponent innan den exporteras. Så det här LoadingHOC komponenten kommer att vara förhöja vår komponent med nya funktioner.
Som jag kortfattat förklarat tidigare tar en HOC en komponent som en inmatning och exporterar sedan en förbättrad version av ingångskomponenten.
Import React Component från "React" import spinner från "... / spinner.gif" const LoadingHOC = (WrappedState) => return (klass LoadingHOC utökar komponent render () returnera this.props.usernames.length == = 0 ?:
) exportera standard LoadingHOC
Inuti HOC kan vi direkt komma åt rekvisita på ingångskomponenten. Så vi kontrollerar bara om längden på användarnamn prop är 0 eller inte. Om det är 0, Det betyder att uppgifterna ännu inte har hämtats eftersom det är en tom matris som standard. Så vi visar bara en spinner GIF som vi importerade. Annars visar vi bara inmatningskomponenten själv.
Det importeras för att inte glömma att skicka några rekvisita och anger tillbaka till ingångskomponenten med en spridningsoperatör. Annars skulle din komponent bli berövad av dem.
Nedan hittar du CSS-filen som är specifik för det här exemplet.
kropp, html -webkit-font-utjämning: antialiased; marginal: 0; vaddering: 0; bakgrundsfärg: # f1f1f1; font-family: "Raleway", sans-serif; -webkit-textstorleksjustering: 100%; kropp display: flex; rättfärdiga innehåll: center; fontstorlek: 1rem / 16; marginal-topp: 50px; li, ul listestil: none; marginal: 0; vaddering: 0; ul margin-top: 10px; li font-size: 0.8rem; marginal-botten: 8px; text-align: center; färg: # 959595; li: sista-of-typ margin-bottom: 50px; .Card font-size: 1.5rem; font-weight: bold; display: flex; flex-riktning: kolumn; align-items: center; bredd: 200px; gränsstråle: 10px; bakgrundsfärg: vit; boxskugga: 0 5px 3px 0 #ebebeb; .header position: relative; fontstorlek: 20px; marginal: 12px 0; färg: # 575757; .header :: efter innehåll: "; position: absolut; vänster: -50%; botten: -10px; bredd: 200%; höjd: 1px; bakgrundsfärg: # f1f1f1; .searchBar text-align: center: margin: 5px 0; border: 1px solid # c4c4c4; height: 20px; color: # 575757; border-radius: 3px; .searchBar: fokus contour-width: 0; .searchBar :: placeholder color: #dadada; .isLading margin: 30px 0; width: 150px; filter: opacity (0.3);
Under hela handledningen tog vi en snabb titt på Random User Generator API som en källa till slumpmässiga data. Sedan hämtade vi data från en API-ändpunkt och omstrukturerade resultaten i ett nytt JavaScript-objekt med Karta metod.
Nästa sak var att skapa en filtreringsfunktion med filtrera och innefattar metoder. Slutligen skapade vi två olika komponenter och förbättrade en av dem med en högre orderkomponent (HOC) genom att införa en laddningsindikator när data inte finns där än.
Under de senaste åren har React vuxit i popularitet. Faktum är att vi har ett antal objekt i Envato Market som är tillgängliga för köp, granskning, genomförande och så vidare. Om du letar efter ytterligare resurser runt React, tveka inte att kolla in dem.
