Oppdatering av et element i databasen
Oppdatere en faktura – Enkle trinn
Når du oppdaterer en faktura, ligner prosessen mye på å opprette en. Her er en oversikt:
- Opprett en dynamisk rute: Opprett et nytt dynamisk rutesegment som inkluderer fakturaens
id. På denne måten forteller vi appen hvilken faktura vi arbeider med; - Les faktura-id: Hent fakturaens
idfra sideparametrene; - Hent spesifikk faktura: Hent informasjon om den valgte fakturaen fra databasen;
- Oppdater database: Etter at nødvendige endringer er gjort, oppdater fakturadataene i databasen.
Tilbake til prosjektet
1. Opprett en dynamisk rute
Basert på endrende data kan vi lage dynamiske rutesegmenter når vi ønsker fleksible ruter. Pakk inn navnet på en mappe i hakeparenteser for å opprette en dynamisk rute. For eksempel, bruk [id], [post] eller [slug] når vi ønsker variable segmenter i ruten.
- Naviger til
/invoices-mappen og opprett en ny dynamisk rute kalt[id]; - Legg til en ny rute kalt 'edit' inne i
/invoices/[id]-mappen. Inkluder enpage.tsx.
Resultat:
La oss se nærmere på Table-komponenten i app/ui/invoices/table.tsx. Vi kan observere at UpdateInvoice mottar fakturaens id.
Gå til <UpdateInvoice />-komponenten (app/ui/invoices/buttons.tsx). Vi ser at vi bruker id som en del av href-verdien.
2. Les faktura-ID
Sett inn følgende kode i app/dashboard/invoices/[id]/edit/page.tsx.
3. Hent spesifikk faktura
Deretter importeres nye funksjoner kalt fetchInvoiceById og fetchSellers.
fetchInvoiceByIdreturnerer data for en spesifikk faktura;fetchSellersreturnerer selgere for nedtrekksmenyen i skjemaet som viser alle selgere.
Vi kan effektivt hente både fakturaen og selgerne samtidig ved å bruke Promise.all.
La oss teste det! Vi kan åpne fakturasiden og klikke på redigeringsknappen (pennsymbol). Dette skal omdirigere oss til skjemaet med en forhåndsutfylt faktura.
4. Oppdater database
Det er nødvendig å sende id til Server Action for å oppdatere riktig post i databasen. Slik kan dette gjøres effektivt:
Bruk JS bind for å sende id til Server Action. Dette sikrer at alle verdier som sendes til Server Action blir korrekt kodet.
Unngå å sende id direkte som et argument i form-handlingen slik som dette:
// This won't work
<form action={updateInvoice(id)}>
Videre fortsetter vi med handlingene og oppretter en handling for å oppdatere fakturaen.
Prøv selv! Etter å ha redigert en faktura, send inn skjemaet, og du skal bli omdirigert til fakturasiden med den oppdaterte fakturaen.
I praksis
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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.08Oppdatering av et element i databasen
Sveip for å vise menyen
Oppdatere en faktura – Enkle trinn
Når du oppdaterer en faktura, ligner prosessen mye på å opprette en. Her er en oversikt:
- Opprett en dynamisk rute: Opprett et nytt dynamisk rutesegment som inkluderer fakturaens
id. På denne måten forteller vi appen hvilken faktura vi arbeider med; - Les faktura-id: Hent fakturaens
idfra sideparametrene; - Hent spesifikk faktura: Hent informasjon om den valgte fakturaen fra databasen;
- Oppdater database: Etter at nødvendige endringer er gjort, oppdater fakturadataene i databasen.
Tilbake til prosjektet
1. Opprett en dynamisk rute
Basert på endrende data kan vi lage dynamiske rutesegmenter når vi ønsker fleksible ruter. Pakk inn navnet på en mappe i hakeparenteser for å opprette en dynamisk rute. For eksempel, bruk [id], [post] eller [slug] når vi ønsker variable segmenter i ruten.
- Naviger til
/invoices-mappen og opprett en ny dynamisk rute kalt[id]; - Legg til en ny rute kalt 'edit' inne i
/invoices/[id]-mappen. Inkluder enpage.tsx.
Resultat:
La oss se nærmere på Table-komponenten i app/ui/invoices/table.tsx. Vi kan observere at UpdateInvoice mottar fakturaens id.
Gå til <UpdateInvoice />-komponenten (app/ui/invoices/buttons.tsx). Vi ser at vi bruker id som en del av href-verdien.
2. Les faktura-ID
Sett inn følgende kode i app/dashboard/invoices/[id]/edit/page.tsx.
3. Hent spesifikk faktura
Deretter importeres nye funksjoner kalt fetchInvoiceById og fetchSellers.
fetchInvoiceByIdreturnerer data for en spesifikk faktura;fetchSellersreturnerer selgere for nedtrekksmenyen i skjemaet som viser alle selgere.
Vi kan effektivt hente både fakturaen og selgerne samtidig ved å bruke Promise.all.
La oss teste det! Vi kan åpne fakturasiden og klikke på redigeringsknappen (pennsymbol). Dette skal omdirigere oss til skjemaet med en forhåndsutfylt faktura.
4. Oppdater database
Det er nødvendig å sende id til Server Action for å oppdatere riktig post i databasen. Slik kan dette gjøres effektivt:
Bruk JS bind for å sende id til Server Action. Dette sikrer at alle verdier som sendes til Server Action blir korrekt kodet.
Unngå å sende id direkte som et argument i form-handlingen slik som dette:
// This won't work
<form action={updateInvoice(id)}>
Videre fortsetter vi med handlingene og oppretter en handling for å oppdatere fakturaen.
Prøv selv! Etter å ha redigert en faktura, send inn skjemaet, og du skal bli omdirigert til fakturasiden med den oppdaterte fakturaen.
I praksis
Takk for tilbakemeldingene dine!
