Oppdatering av data med FormData i React Router

Vi har en funksjon updateProduct for å oppdatere produktdataene i lagringsplassen. La oss nå gå videre til dataene fra vårt redigeringsskjema.

Ved innsending av et HTML-skjema oppretter nettleseren et FormData-objekt med dataene og sender det i forespørselskroppen til serveren. Verdien for hvert inputfelt hentes inn i objektet fra name-attributten (det var derfor vi trengte dem i skjemaet, husker du?). Vi vet nå at React Router sender forespørsler ikke til serveren, men til action-metoden i vår rute, og følgelig vil FormData komme dit. La oss jobbe med dette.

La oss først åpne filen vår edit.jsx og importere updateProduct:

import { updateProduct } from '../forStorage';

Deretter skal vi skrive en funksjon for action i ruteobjektet, slik vi gjorde tidligere. La oss legge den til rett etter loader-funksjonen. Vi vil sende vår request og URL-parametere til den:

export async function action({ request, params }) {}

Fra forespørselen vil vi hente FormData, deretter utvinne dataene fra den som et objekt som inneholder nøkkel: verdi-par og ved hjelp av updateProduct sende disse dataene til lagringsplassen:

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

Det eneste som gjenstår er å gå inn i main.jsx og legge til action-funksjonen i redigeringsruteobjektet. La oss importere action:

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

Og legge den til i redigeringsruteobjektet:

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

Start applikasjonen nå, legg til et par produkter i listen, deretter ved å klikke på dem fyll ut skjemaet og trykk på lagre-knappen. Ikke glem å gå inn i utviklerverktøyene i localforage-delen og oppdatere lagringsplassen. Nå i keyvaluespairs-delen kan vi se objekter i products-matrisen med våre innførte data.

Ta applikasjonen du opprettet i oppgavene til forrige leksjon. Ved å bruke materialet fra leksjonen, opprett en funksjon action for ruten for redigering av studentdata, legg den til i redigeringsruteobjektet. Åpne utviklerverktøyene og forsikre deg om at ved endringer vises de oppdaterte dataene mir på localforage-fanen.