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:

routes/edit.jsximport { 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:

routes/edit.jsxexport 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:

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;
}

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

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

Og legge den til i redigeringsruteobjektet:

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