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