Uppdatera en faktura - Enkla steg

Vid uppdatering av en faktura är processen mycket lik att skapa en. Här är en översikt:

1. Skapa en dynamisk route: Skapa ett nytt dynamiskt route-segment som inkluderar fakturans id. På så sätt anger vi för appen vilken faktura vi arbetar med;
2. Läs faktura-id: Hämta fakturans id från sidans parametrar;
3. Hämta specifik faktura: Hämta information om den valda fakturan från databasen;
4. Uppdatera databas: Efter att nödvändiga ändringar har gjorts, uppdatera fakturans data i databasen.

Tillbaka till projektet

1. Skapa en dynamisk route

Baserat på föränderliga data kan vi skapa dynamiska route-segment när vi vill ha flexibla rutter. Omslut en mappnamn med hakparenteser för att skapa en dynamisk route. Använd till exempel [id], [post] eller [slug] när vi vill ha variabla segment i routen.

1. Navigera till mappen /invoices och skapa en ny dynamisk route med namnet [id];
2. Lägg till en ny route kallad 'edit' i mappen /invoices/[id]. Inkludera en page.tsx.

Resultat:

Låt oss undersöka Table-komponenten i app/ui/invoices/table.tsx. Vi kan observera att UpdateInvoice tar emot fakturans id.

Gå till <UpdateInvoice />-komponenten (app/ui/invoices/buttons.tsx). Vi ser att vi använder id som en del av href-värdet.

2. Läs faktura-id

Infoga följande kod i app/dashboard/invoices/[id]/edit/page.tsx.

3. Hämta specifik faktura

Därefter importerar vi nya funktioner som heter fetchInvoiceById och fetchSellers.

• fetchInvoiceById returnerar data för en specifik faktura;
• fetchSellers returnerar säljare för formulärets rullgardinsmeny som visar alla säljare.

Vi kan effektivt hämta både fakturan och säljarna samtidigt med hjälp av Promise.all.

Testa detta! Öppna fakturasidan och klicka på redigeringsknappen (pennsymbolen). Du ska då omdirigeras till formuläret med en förifylld faktura.

4. Uppdatera databasen

Vi behöver skicka id till Server Action för att uppdatera rätt post i databasen. Så här gör du det effektivt:

Använd JS bind för att skicka id till Server Action. Detta säkerställer att alla värden som skickas till Server Action är korrekt kodade.

Undvik att skicka id som ett argument direkt i form action på detta sätt:

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

Därefter fortsätter vi med åtgärderna och skapar en åtgärd för att uppdatera fakturan.

Prova själv! Efter att du har redigerat en faktura, skicka in formuläret och du ska omdirigeras till fakturasidan med den uppdaterade fakturan.

I praktiken