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:

import { 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:

export 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:

export 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:

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

Ja lisäämme sen muokkausreitin objektiin:

{
	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.

Ota edellisen oppitunnin tehtävissä luomasi sovellus. Hyödyntämällä oppitunnin materiaaleja, luo action-funktio opiskelijatietojen muokkausreitille, lisää se muokkausreitin objektiin. Avaa kehittäjän paneeli ja varmista, että muutosten yhteydessä päivitetyt tiedot näkyvät todella localforage-välilehdellä.