Kohteen Päivittäminen Tietokannassa
Laskun päivittäminen – Yksinkertaiset vaiheet
Laskun päivittäminen muistuttaa hyvin paljon uuden laskun luomista. Tässä vaiheet:
- Luo dynaaminen reitti: Luo uusi dynaaminen reittisegmentti, joka sisältää laskun
id:n. Näin sovellukselle kerrotaan, minkä laskun kanssa työskennellään; - Lue laskun id: Hae laskun
idsivun parametreista; - Hae tietty lasku: Nouda valitun laskun tiedot tietokannasta;
- Päivitä tietokanta: Tee tarvittavat muutokset ja päivitä laskun tiedot tietokantaan.
Takaisin projektiin
1. Luo dynaaminen reitti
Muuttuvan datan perusteella voidaan luoda dynaamisia reittisegmenttejä, kun halutaan joustavia reittejä. Kääri kansion nimi hakasulkeisiin luodaksesi dynaamisen reitin. Esimerkiksi käytä [id], [post] tai [slug], kun halutaan muuttuvia segmenttejä reittiin.
- Siirry
/invoices-kansioon ja luo uusi dynaaminen reitti nimeltä[id]; - Lisää uusi reitti nimeltä 'edit'
/invoices/[id]-kansion sisälle. Lisää myöspage.tsx.
Tulos:
Tarkastellaan Table-komponenttia tiedostossa app/ui/invoices/table.tsx. Voimme havaita, että UpdateInvoice vastaanottaa laskun id:n.
Siirry <UpdateInvoice />-komponenttiin (app/ui/invoices/buttons.tsx). Näemme, että käytämme id:tä osana href-arvoa.
2. Lue laskun id
Lisää seuraava koodi tiedostoon app/dashboard/invoices/[id]/edit/page.tsx.
3. Hae tietty lasku
Seuraavaksi tuodaan uudet funktiot nimeltä fetchInvoiceById ja fetchSellers.
fetchInvoiceByIdpalauttaa tietyn laskun tiedot;fetchSellerspalauttaa myyjät lomakkeen pudotusvalikkoa varten, jossa näytetään kaikki myyjät.
Voimme hakea sekä laskun että myyjät tehokkaasti samanaikaisesti käyttämällä Promise.all -metodia.
Testataanpa tätä! Voimme avata laskusivun ja klikata muokkauspainiketta (kynän symboli). Tämän pitäisi ohjata meidät lomakkeeseen, jossa laskun tiedot ovat valmiiksi täytettyinä.
4. Päivitä tietokanta
id tulee lähettää Server Actionille, jotta oikea tietue päivittyy tietokantaan. Näin voit tehdä sen tehokkaasti:
Käytä JS:n bind-metodia välittääksesi id Server Actionille. Tämä varmistaa, että kaikki Server Actionille lähetettävät arvot koodataan asianmukaisesti.
Vältä id:n välittämistä suoraan lomakkeen action-parametrina näin:
// This won't work
<form action={updateInvoice(id)}>
Seuraavaksi jatketaan toiminnoilla ja luodaan toiminto laskun päivittämistä varten.
Kokeile itse! Muokkaa laskua, lähetä lomake ja sinut ohjataan laskut-sivulle, jossa päivitetty lasku näkyy.
Käytännössä
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.08Kohteen Päivittäminen Tietokannassa
Pyyhkäise näyttääksesi valikon
Laskun päivittäminen – Yksinkertaiset vaiheet
Laskun päivittäminen muistuttaa hyvin paljon uuden laskun luomista. Tässä vaiheet:
- Luo dynaaminen reitti: Luo uusi dynaaminen reittisegmentti, joka sisältää laskun
id:n. Näin sovellukselle kerrotaan, minkä laskun kanssa työskennellään; - Lue laskun id: Hae laskun
idsivun parametreista; - Hae tietty lasku: Nouda valitun laskun tiedot tietokannasta;
- Päivitä tietokanta: Tee tarvittavat muutokset ja päivitä laskun tiedot tietokantaan.
Takaisin projektiin
1. Luo dynaaminen reitti
Muuttuvan datan perusteella voidaan luoda dynaamisia reittisegmenttejä, kun halutaan joustavia reittejä. Kääri kansion nimi hakasulkeisiin luodaksesi dynaamisen reitin. Esimerkiksi käytä [id], [post] tai [slug], kun halutaan muuttuvia segmenttejä reittiin.
- Siirry
/invoices-kansioon ja luo uusi dynaaminen reitti nimeltä[id]; - Lisää uusi reitti nimeltä 'edit'
/invoices/[id]-kansion sisälle. Lisää myöspage.tsx.
Tulos:
Tarkastellaan Table-komponenttia tiedostossa app/ui/invoices/table.tsx. Voimme havaita, että UpdateInvoice vastaanottaa laskun id:n.
Siirry <UpdateInvoice />-komponenttiin (app/ui/invoices/buttons.tsx). Näemme, että käytämme id:tä osana href-arvoa.
2. Lue laskun id
Lisää seuraava koodi tiedostoon app/dashboard/invoices/[id]/edit/page.tsx.
3. Hae tietty lasku
Seuraavaksi tuodaan uudet funktiot nimeltä fetchInvoiceById ja fetchSellers.
fetchInvoiceByIdpalauttaa tietyn laskun tiedot;fetchSellerspalauttaa myyjät lomakkeen pudotusvalikkoa varten, jossa näytetään kaikki myyjät.
Voimme hakea sekä laskun että myyjät tehokkaasti samanaikaisesti käyttämällä Promise.all -metodia.
Testataanpa tätä! Voimme avata laskusivun ja klikata muokkauspainiketta (kynän symboli). Tämän pitäisi ohjata meidät lomakkeeseen, jossa laskun tiedot ovat valmiiksi täytettyinä.
4. Päivitä tietokanta
id tulee lähettää Server Actionille, jotta oikea tietue päivittyy tietokantaan. Näin voit tehdä sen tehokkaasti:
Käytä JS:n bind-metodia välittääksesi id Server Actionille. Tämä varmistaa, että kaikki Server Actionille lähetettävät arvot koodataan asianmukaisesti.
Vältä id:n välittämistä suoraan lomakkeen action-parametrina näin:
// This won't work
<form action={updateInvoice(id)}>
Seuraavaksi jatketaan toiminnoilla ja luodaan toiminto laskun päivittämistä varten.
Kokeile itse! Muokkaa laskua, lähetä lomake ja sinut ohjataan laskut-sivulle, jossa päivitetty lasku näkyy.
Käytännössä
Kiitos palautteestasi!
