Aktualizace dat s FormData v React Router

Máme funkci updateProduct pro aktualizaci dat produktu v úložišti. Nyní přejděme k datům z našeho formuláře pro editaci.

Při odeslání HTML formuláře prohlížeč vytvoří objekt FormData s daty a pošle jej v těle požadavku na server. Hodnota každého vstupního pole je extrahována do objektu z atributu name (proto jsme je potřebovali ve formuláři, pamatujete?). Nyní víme, že React Router neposílá požadavky na server, ale do metody action naší trasy, podle toho tam skončí i FormData. Pojďme s tím pracovat.

Pro začátek otevřeme náš soubor edit.jsx a importujeme updateProduct:

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

Poté napíšeme funkci pro action objektu trasy, jak jsme to dělali dříve. Přidáme ji ihned po funkci loader. Budeme jí předávat náš request a URL parametry:

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

Z požadavku získáme FormData, poté extrahujeme data do objektu obsahujícího páry klíč: hodnota a pomocí updateProduct pošleme tato data do úložiště:

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

Zbývá pouze zajít do main.jsx a přidat funkci action do objektu trasy editace. Importujeme action:

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

A přidáme jej do objektu trasy editace:

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

Spusťte nyní aplikaci, přidejte pár produktů do seznamu, poté klikáním na ně vyplňujte formulář a stiskněte tlačítko uložení. Nezapomeňte jít do panelu vývojáře v sekci localforage a obnovit úložiště. Nyní v části keyvaluespairs můžeme vidět objekty v poli products s našimi zadanými daty.