Opdater en faktura - Enkle trin

Ved opdatering af en faktura minder processen meget om oprettelsen af en ny. Her er en oversigt:

1. Opret en dynamisk rute: Opret et nyt dynamisk rutesegment, der inkluderer fakturaens id. På denne måde angiver vi, hvilken faktura vi arbejder med;
2. Læs faktura-id: Hent fakturaens id fra sideparametrene;
3. Hent specifik faktura: Hent informationen om den valgte faktura fra databasen;
4. Opdater database: Efter eventuelle nødvendige ændringer opdateres fakturadataene i databasen.

Tilbage til projektet

1. Opret en dynamisk rute

Baseret på skiftende data kan vi oprette dynamiske rutesegmenter, når der ønskes fleksible ruter. Omslut en mappes navn med kantede parenteser for at oprette en dynamisk rute. For eksempel anvendes [id], [post] eller [slug], når der ønskes variable segmenter i ruten.

1. Naviger til mappen /invoices og opret en ny dynamisk rute med navnet [id];
2. Tilføj en ny rute kaldet 'edit' inde i mappen /invoices/[id]. Inkluder en page.tsx.

Resultat:

Lad os undersøge Table-komponenten i app/ui/invoices/table.tsx. Det kan observeres, at UpdateInvoice modtager fakturaens id.

Gå til <UpdateInvoice />-komponenten (app/ui/invoices/buttons.tsx). Det ses, at id anvendes som en del af href-værdien.

2. Læs faktura-id

Indsæt følgende kode i app/dashboard/invoices/[id]/edit/page.tsx.

3. Hent specifik faktura

Dernæst importeres nye funktioner kaldet fetchInvoiceById og fetchSellers.

• fetchInvoiceById returnerer data for en specifik faktura;
• fetchSellers returnerer sælgere til formularens dropdown, der viser alle sælgere.

Det er muligt effektivt at hente både fakturaen og sælgere samtidigt ved at bruge Promise.all.

Test det! Åbn fakturasiden og klik på redigeringsknappen (pennesymbol). Dette bør omdirigere til formularen med en forudfyldt faktura.

4. Opdater database

Det er nødvendigt at sende id til Server Action for at opdatere den korrekte post i databasen. Her er en effektiv metode:

Brug JS bind til at videregive id til Server Action. Dette sikrer, at alle værdier, der sendes til Server Action, bliver korrekt kodet.

Undgå at sende id direkte som argument i form action på denne måde:

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

Dernæst fortsættes med handlingerne, og der oprettes en handling til opdatering af fakturaen.

Prøv det! Efter redigering af en faktura, indsend formularen, og du bør blive omdirigeret til fakturasiden med den opdaterede faktura.

I praksis