Aktualisierung eines Elements in der Datenbank
Aktualisierung einer Rechnung – Einfache Schritte
Beim Aktualisieren einer Rechnung ist der Ablauf dem Erstellen sehr ähnlich. Hier eine Übersicht:
- Dynamische Route erstellen: Einen neuen dynamischen Routenabschnitt anlegen, der die Rechnungs-
id
enthält. So wird der App mitgeteilt, mit welcher Rechnung gearbeitet wird; - Rechnungs-ID auslesen: Die Rechnungs-
id
aus den Seitenparametern entnehmen; - Spezifische Rechnung abrufen: Die Informationen zur ausgewählten Rechnung aus der Datenbank abrufen;
- 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.
- Zum Ordner
/invoices
navigieren und eine neue dynamische Route mit dem Namen[id]
erstellen; - Eine neue Route namens 'edit' im Ordner
/invoices/[id]
hinzufügen. Einepage.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
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 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
Aktualisierung 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:
- Dynamische Route erstellen: Einen neuen dynamischen Routenabschnitt anlegen, der die Rechnungs-
id
enthält. So wird der App mitgeteilt, mit welcher Rechnung gearbeitet wird; - Rechnungs-ID auslesen: Die Rechnungs-
id
aus den Seitenparametern entnehmen; - Spezifische Rechnung abrufen: Die Informationen zur ausgewählten Rechnung aus der Datenbank abrufen;
- 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.
- Zum Ordner
/invoices
navigieren und eine neue dynamische Route mit dem Namen[id]
erstellen; - Eine neue Route namens 'edit' im Ordner
/invoices/[id]
hinzufügen. Einepage.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
Danke für Ihr Feedback!