Posodabljanje podatkov s FormData v React Router

Imamo funkcijo updateProduct za posodabljanje podatkov izdelka v shrambi. Zdaj pa pojdimo k podatkom iz našega obrazca za urejanje.

Ko pošljemo HTML-obrazec, brskalnik ustvari objekt FormData s podatki in jih pošlje v telesu zahteve na strežnik. Poleg tega je vrednost vsakega vnosnega polja pridobljena v objekt iz atributa name (zato smo jih potrebovali v obrazcu, se spomnite?). Mi zdaj vemo, da React Router pošilja zahteve ne na strežnik, ampak v metodo action naše poti, v skladu s tem, tja pride tudi FormData. Delajmo s tem.

Za začetek odprimo našo datoteko edit.jsx in uvozimo updateProduct:

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

Nato bomo napisali funkcijo za action objekta poti, kot smo to počeli prej. Dodajmo jo takoj za funkcijo loader. Ji bomo posredovali naš request in URL parametre:

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

Iz zahteve bomo dobili FormData, nato bomo iz njega pridobili podatke v obliki objekta, ki vsebuje pare ključ: vrednost in s pomočjo updateProduct poslali te podatke v shrambo:

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

Ostane samo še, da gremo v main.jsx in dodamo funkcijo action v objekt poti za urejanje. Uvozimo action:

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

In ga dodajmo v objekt poti urejanja:

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

Zdaj zaženite aplikacijo, dodajte nekaj izdelkov na seznam, nato z klikom nanje izpolnite obrazec in pritisnite na gumb za shranjevanje. Ne pozabite iti v razvojno ploščo v razdelek localforage in osvežiti shrambe. Zdaj v razdelku keyvaluespairs lahko vidimo objekte v matriki products z našimi vnesenimi podatki.