Herausforderung: Daten Abrufen und Anzeigen
Konzentrieren wir uns auf die nächste Komponente, LatestInvoices. Ihr Zweck ist es, die letzten fünf Rechnungen anzuzeigen, chronologisch nach Datum sortiert.
Es könnte naheliegend erscheinen, dies einfach mit JavaScript zu lösen. Doch mit wachsender App und zunehmender Datenmenge ist es sinnvoller, das Sortieren und Begrenzen der Rechnungen per SQL zu erledigen. So wird die Frontend-Seite nicht mit unnötigen Berechnungen belastet.
Um die Funktion fetchLatestInvoices einzusehen, besuchen Sie bitte app/lib/data.ts.
Zurück zum Projekt
Wir verwenden die Funktion fetchLatestInvoices auf der Dashboard-Seite, um die neuesten Rechnungen abzurufen und sie mit der Komponente LatestInvoices anzuzeigen.
Vergessen Sie nicht, app/ui/dashboard/latest-invoices.tsx zu öffnen und das bereitgestellte UI zu entkommentieren.
Herausforderung
Nun besteht die Möglichkeit, die Daten abzurufen und die Informationen für die Benutzer bereitzustellen.
Auf der Dashboard-Seite befindet sich hauptsächlich eine Card-Komponente. Die Aufgabe besteht darin, die Funktion fetchCardData zu importieren, die Folgendes bereitstellt:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Basierend auf den abgerufenen Daten die entsprechende Card-Komponente auskommentieren.
Ergebnis
In der Praxis
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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.08Herausforderung: Daten Abrufen und Anzeigen
Swipe um das Menü anzuzeigen
Konzentrieren wir uns auf die nächste Komponente, LatestInvoices. Ihr Zweck ist es, die letzten fünf Rechnungen anzuzeigen, chronologisch nach Datum sortiert.
Es könnte naheliegend erscheinen, dies einfach mit JavaScript zu lösen. Doch mit wachsender App und zunehmender Datenmenge ist es sinnvoller, das Sortieren und Begrenzen der Rechnungen per SQL zu erledigen. So wird die Frontend-Seite nicht mit unnötigen Berechnungen belastet.
Um die Funktion fetchLatestInvoices einzusehen, besuchen Sie bitte app/lib/data.ts.
Zurück zum Projekt
Wir verwenden die Funktion fetchLatestInvoices auf der Dashboard-Seite, um die neuesten Rechnungen abzurufen und sie mit der Komponente LatestInvoices anzuzeigen.
Vergessen Sie nicht, app/ui/dashboard/latest-invoices.tsx zu öffnen und das bereitgestellte UI zu entkommentieren.
Herausforderung
Nun besteht die Möglichkeit, die Daten abzurufen und die Informationen für die Benutzer bereitzustellen.
Auf der Dashboard-Seite befindet sich hauptsächlich eine Card-Komponente. Die Aufgabe besteht darin, die Funktion fetchCardData zu importieren, die Folgendes bereitstellt:
numberOfSellers;numberOfInvoices;totalFulfilledInvoices;totalAwaitingInvoices.
Basierend auf den abgerufenen Daten die entsprechende Card-Komponente auskommentieren.
Ergebnis
In der Praxis
Danke für Ihr Feedback!
