Haaste: Tietojen Hakeminen ja Näyttäminen
Keskitytään seuraavaksi komponenttiin LatestInvoices
. Sen tarkoituksena on näyttää viisi viimeisintä laskua, järjestettynä aikajärjestyksessä päivämäärän mukaan.
Saatat ajatella, että tämän toteuttaminen JavaScriptillä on yksinkertaista. Sovelluksen kasvaessa ja datamäärän lisääntyessä on kuitenkin suositeltavaa hoitaa laskujen järjestäminen ja rajaaminen SQL:n avulla. Näin vältetään tarpeettomat laskutoimitukset frontendissä.
Tutustuaksesi fetchLatestInvoices
-funktioon, siirry tiedostoon app/lib/data.ts
.
Takaisin projektiin
Käytämme fetchLatestInvoices
-funktiota dashboard-sivulla hakeaksemme uusimmat laskut ja näytämme ne LatestInvoices
-komponentilla.
Muista siirtyä tiedostoon app/ui/dashboard/latest-invoices.tsx
ja poistaa kommenttimerkinnät annetusta käyttöliittymästä.
Haaste
Nyt on sinun vuorosi hakea data ja esittää tiedot käyttäjälle.
Pääasiassa käytössä on Card
-komponentti kojelautasivulla. Tehtävänäsi on tuoda fetchCardData
-funktio, joka tarjoaa:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Haetun datan perusteella poista kommentointi vastaavalta Card
-komponentilta.
Tulos
Käytännössä
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain how the fetchLatestInvoices function works?
Where can I find the LatestInvoices component code?
What should I do if the LatestInvoices component doesn't display any data?
Awesome!
Completion rate improved to 2.08
Haaste: Tietojen Hakeminen ja Näyttäminen
Pyyhkäise näyttääksesi valikon
Keskitytään seuraavaksi komponenttiin LatestInvoices
. Sen tarkoituksena on näyttää viisi viimeisintä laskua, järjestettynä aikajärjestyksessä päivämäärän mukaan.
Saatat ajatella, että tämän toteuttaminen JavaScriptillä on yksinkertaista. Sovelluksen kasvaessa ja datamäärän lisääntyessä on kuitenkin suositeltavaa hoitaa laskujen järjestäminen ja rajaaminen SQL:n avulla. Näin vältetään tarpeettomat laskutoimitukset frontendissä.
Tutustuaksesi fetchLatestInvoices
-funktioon, siirry tiedostoon app/lib/data.ts
.
Takaisin projektiin
Käytämme fetchLatestInvoices
-funktiota dashboard-sivulla hakeaksemme uusimmat laskut ja näytämme ne LatestInvoices
-komponentilla.
Muista siirtyä tiedostoon app/ui/dashboard/latest-invoices.tsx
ja poistaa kommenttimerkinnät annetusta käyttöliittymästä.
Haaste
Nyt on sinun vuorosi hakea data ja esittää tiedot käyttäjälle.
Pääasiassa käytössä on Card
-komponentti kojelautasivulla. Tehtävänäsi on tuoda fetchCardData
-funktio, joka tarjoaa:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Haetun datan perusteella poista kommentointi vastaavalta Card
-komponentilta.
Tulos
Käytännössä
Kiitos palautteestasi!