Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Daten Abrufen und Anzeigen | Abrufen und Anzeigen von Daten in Next.js
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookHerausforderung: 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

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.08

bookHerausforderung: 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

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3
some-alt