Aktualisieren einer Rechnung - Einfache Schritte

Beim Aktualisieren einer Rechnung ist der Prozess dem Erstellen einer Rechnung sehr ähnlich. Hier ist eine Aufschlüsselung:

1. Erstellen Sie eine dynamische Route: Erstellen Sie ein neues dynamisches Routensegment, einschließlich der Rechnungs-id. Auf diese Weise teilen wir der App mit, mit welcher Rechnung wir arbeiten;
2. Lesen Sie die Rechnungs-id: Holen Sie sich die Rechnungs-id aus den Seitenparametern;
3. Spezifische Rechnung abrufen: Holen Sie die Informationen über die ausgewählte Rechnung aus der Datenbank;
4. Datenbank aktualisieren: Nachdem Sie alle notwendigen Änderungen vorgenommen haben, aktualisieren Sie die Rechnungsdaten in der Datenbank.

Zurück zum Projekt

1. Erstellen Sie eine dynamische Route

Basierend auf sich ändernden Daten können wir dynamische Routensegmente erstellen, wenn wir flexible Routen wünschen. Um eine dynamische Route zu erstellen, setzen Sie den Namen eines Ordners in eckige Klammern. Verwenden Sie beispielsweise [id], [post] oder [slug], wenn wir variable Segmente in der Route wünschen.

1. Navigieren Sie zum Ordner /invoices und erstellen Sie eine neue dynamische Route namens [id];
2. Fügen Sie eine neue Route namens 'edit' im Ordner /invoices/[id] hinzu. Inkludieren Sie eine page.tsx.

Ergebnis:

Lassen Sie uns die Table-Komponente in app/ui/invoices/table.tsx untersuchen. Wir können beobachten, dass UpdateInvoice die Rechnungs-id erhält.

Gehe zu der <UpdateInvoice /> (app/ui/invoices/buttons.tsx) Komponente. Wir sehen, dass wir die id als Teil des href Wertes verwenden.

2. Lesen Sie die Rechnungs-ID

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

3. Spezifische Rechnung abrufen

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

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

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

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

4. Datenbank aktualisieren

Wir müssen die id an die Serveraktion senden, um den richtigen Datensatz in der Datenbank zu aktualisieren. So können Sie es effektiv tun:

Verwenden Sie JS bind, um die id an die Serveraktion zu übergeben. Dies stellt sicher, dass alle an die Serveraktion gesendeten Werte ordnungsgemäß kodiert werden.

Vermeiden Sie es, die id direkt als Argument in der Formularaktion zu übergeben, wie hier:

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

Als nächstes werden wir mit den Aktionen fortfahren und eine Aktion zum Aktualisieren der Rechnung erstellen.

Probieren Sie es aus! Nachdem Sie eine Rechnung bearbeitet haben, senden Sie das Formular ab, und Sie sollten zur Rechnungsseite mit der aktualisierten Rechnung weitergeleitet werden.

In der Praxis