Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Aktualisierung eines Elements in der Datenbank | Erweiterte Next.js-Funktionen und Optimierungen
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookAktualisierung eines Elements in der Datenbank

Aktualisierung einer Rechnung – Einfache Schritte

Beim Aktualisieren einer Rechnung ist der Ablauf dem Erstellen sehr ähnlich. Hier eine Übersicht:

  1. Dynamische Route erstellen: Einen neuen dynamischen Routenabschnitt anlegen, der die Rechnungs-id enthält. So wird der App mitgeteilt, mit welcher Rechnung gearbeitet wird;
  2. Rechnungs-ID auslesen: Die Rechnungs-id aus den Seitenparametern entnehmen;
  3. Spezifische Rechnung abrufen: Die Informationen zur ausgewählten Rechnung aus der Datenbank abrufen;
  4. Datenbank aktualisieren: Nach den erforderlichen Änderungen die Rechnungsdaten in der Datenbank aktualisieren.

Zurück zum Projekt

1. Erstellen eines dynamischen Pfads

Basierend auf sich ändernden Daten können wir dynamische Routen-Segmente erstellen, wenn flexible Routen benötigt werden. Um einen dynamischen Pfad zu erstellen, den Namen eines Ordners in eckige Klammern setzen. Zum Beispiel [id], [post] oder [slug] verwenden, wenn variable Segmente im Pfad benötigt werden.

  1. Zum Ordner /invoices navigieren und eine neue dynamische Route mit dem Namen [id] erstellen;
  2. Eine neue Route namens 'edit' im Ordner /invoices/[id] hinzufügen. Eine page.tsx einfügen.

Ergebnis:

Untersuchen wir die Table-Komponente in app/ui/invoices/table.tsx. Es ist erkennbar, dass UpdateInvoice die Rechnungs-id erhält.

Zur Komponente <UpdateInvoice /> (app/ui/invoices/buttons.tsx) wechseln. Es ist ersichtlich, dass die id als Teil des href-Werts verwendet wird.

2. Lesen der Rechnungs-ID

Fügen Sie den folgenden Code in app/dashboard/invoices/[id]/edit/page.tsx ein.

3. Abrufen einer bestimmten Rechnung

Als Nächstes importieren wir neue Funktionen namens fetchInvoiceById und fetchSellers.

  • fetchInvoiceById gibt Daten für eine bestimmte Rechnung zurück;
  • fetchSellers gibt Verkäufer für das Dropdown-Menü im Formular zurück, das alle Verkäufer anzeigt.

Wir können sowohl die Rechnung als auch die Verkäufer effizient gleichzeitig mit Promise.all abrufen.

Testen wir es! Wir können die Rechnungsseite öffnen und auf die Schaltfläche zum Bearbeiten (Stiftsymbol) klicken. Dies sollte uns zum Formular mit einer vorausgefüllten Rechnung weiterleiten.

4. Datenbank aktualisieren

Die id muss an die Server Action gesendet werden, um den korrekten Datensatz in der Datenbank zu aktualisieren. So gelingt dies effektiv:

Verwendung von JS bind, um die id an die Server Action zu übergeben. Dadurch wird sichergestellt, dass alle an die Server Action gesendeten Werte korrekt codiert werden.

Vermeiden Sie es, die id direkt als Argument in der Form-Action wie folgt zu übergeben:

// This won't work 
<form action={updateInvoice(id)}> 

Als Nächstes werden die Aktionen umgesetzt und eine Aktion zum Aktualisieren der Rechnung erstellt.

Probieren Sie es aus! Nach dem Bearbeiten einer Rechnung das Formular absenden; Sie werden zur Rechnungsübersicht weitergeleitet und sehen die aktualisierte Rechnung.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Suggested prompts:

Can you explain how the dynamic route works in this context?

What should I do if the invoice form doesn't prefill with data?

How do I handle errors when updating an invoice?

Awesome!

Completion rate improved to 2.08

bookAktualisierung eines Elements in der Datenbank

Swipe um das Menü anzuzeigen

Aktualisierung einer Rechnung – Einfache Schritte

Beim Aktualisieren einer Rechnung ist der Ablauf dem Erstellen sehr ähnlich. Hier eine Übersicht:

  1. Dynamische Route erstellen: Einen neuen dynamischen Routenabschnitt anlegen, der die Rechnungs-id enthält. So wird der App mitgeteilt, mit welcher Rechnung gearbeitet wird;
  2. Rechnungs-ID auslesen: Die Rechnungs-id aus den Seitenparametern entnehmen;
  3. Spezifische Rechnung abrufen: Die Informationen zur ausgewählten Rechnung aus der Datenbank abrufen;
  4. Datenbank aktualisieren: Nach den erforderlichen Änderungen die Rechnungsdaten in der Datenbank aktualisieren.

Zurück zum Projekt

1. Erstellen eines dynamischen Pfads

Basierend auf sich ändernden Daten können wir dynamische Routen-Segmente erstellen, wenn flexible Routen benötigt werden. Um einen dynamischen Pfad zu erstellen, den Namen eines Ordners in eckige Klammern setzen. Zum Beispiel [id], [post] oder [slug] verwenden, wenn variable Segmente im Pfad benötigt werden.

  1. Zum Ordner /invoices navigieren und eine neue dynamische Route mit dem Namen [id] erstellen;
  2. Eine neue Route namens 'edit' im Ordner /invoices/[id] hinzufügen. Eine page.tsx einfügen.

Ergebnis:

Untersuchen wir die Table-Komponente in app/ui/invoices/table.tsx. Es ist erkennbar, dass UpdateInvoice die Rechnungs-id erhält.

Zur Komponente <UpdateInvoice /> (app/ui/invoices/buttons.tsx) wechseln. Es ist ersichtlich, dass die id als Teil des href-Werts verwendet wird.

2. Lesen der Rechnungs-ID

Fügen Sie den folgenden Code in app/dashboard/invoices/[id]/edit/page.tsx ein.

3. Abrufen einer bestimmten Rechnung

Als Nächstes importieren wir neue Funktionen namens fetchInvoiceById und fetchSellers.

  • fetchInvoiceById gibt Daten für eine bestimmte Rechnung zurück;
  • fetchSellers gibt Verkäufer für das Dropdown-Menü im Formular zurück, das alle Verkäufer anzeigt.

Wir können sowohl die Rechnung als auch die Verkäufer effizient gleichzeitig mit Promise.all abrufen.

Testen wir es! Wir können die Rechnungsseite öffnen und auf die Schaltfläche zum Bearbeiten (Stiftsymbol) klicken. Dies sollte uns zum Formular mit einer vorausgefüllten Rechnung weiterleiten.

4. Datenbank aktualisieren

Die id muss an die Server Action gesendet werden, um den korrekten Datensatz in der Datenbank zu aktualisieren. So gelingt dies effektiv:

Verwendung von JS bind, um die id an die Server Action zu übergeben. Dadurch wird sichergestellt, dass alle an die Server Action gesendeten Werte korrekt codiert werden.

Vermeiden Sie es, die id direkt als Argument in der Form-Action wie folgt zu übergeben:

// This won't work 
<form action={updateInvoice(id)}> 

Als Nächstes werden die Aktionen umgesetzt und eine Aktion zum Aktualisieren der Rechnung erstellt.

Probieren Sie es aus! Nach dem Bearbeiten einer Rechnung das Formular absenden; Sie werden zur Rechnungsübersicht weitergeleitet und sehen die aktualisierte Rechnung.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 6. Kapitel 6
some-alt