Tietojen päivittäminen FormDatan kanssa React Routerissa

Meillä on funktio updateProduct tuotetietojen päivittämiseen tallennustilassa. Nyt siirrymme lomakkeestamme saamiimme muokkausdataan.

Kun HTML-lomake lähetetään, selain luo FormData-objektin datalla ja lähettää sen pyynnön rungossa palvelimelle. Lisäksi, jokaisen syöttökentän arvo poimitaan objektiin name-attribuutista (minkä takia tarvitsimme ne lomakkeessa, muistatko?). Me nyt tiedämme, että React Router lähettää pyyntöjä palvelimelle, vaan reitin action -metodiin, jolloin sinne päätyy myös FormData. Työskentelemme tämän kanssa.

Aluksi avaamme tiedostomme edit.jsx ja tuomme updateProduct:

routes/edit.jsximport { updateProduct } from '../forStorage';

Sitten kirjoitamme funktion reitin objektin action -metodille, kuten teimme aiemmin. Lisäämme sen heti loader-funktion jälkeen. Sille välitämme request-pyynnön ja URL-parametrit:

routes/edit.jsxexport async function action({ request, params }) {}

Pyynnöstä saamme FormData, sitten poimimme siitä datan objektina, jossa on avain: arvo -parit ja updateProduct-funktiolla lähetämme nämä tiedot tallennustilaan:

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

Vielä on mentävä tiedostoon main.jsx ja lisättävä action-funktio muokkausreitin objektin. Tuomme action-funktion:

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

Ja lisäämme sen muokkausreitin objektiin:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

Käynnistä nyt sovellus, lisää pari tuotetta listaan, sitten klikkaamalla niitä täytä lomake ja paina tallennuspainiketta. Älä unohda mennä kehittäjän paneeliin localforage-osaan ja päivittää tallennustilaa. Nyt keyvaluespairs-osiossa voimme nähdä objektit products-taulukossa lisäämillämme datalla.