Adatok frissítése FormData-val React Routerben

Van egy updateProduct funkciónk, amely frissíti a termék adatait a tárolóban. Most térjünk át a szerkesztő űrlapunkból származó adatokra.

Amikor egy HTML-űrlap elküldésre kerül, a böngésző létrehoz egy FormData objektumot az adatokkal, és elküldi azt a kérés törzsében a szerver felé. Ráadásul minden input mező értéke kinyerésre kerül az objektumba a name attribútum alapján (ezért is voltak szükségesek számunkra az űrlapban, emlékszel?). Most már tudjuk, hogy a React Router nem a szerver felé küldi a kéréseket, hanem az útvonalunk action módszerébe, ennek megfelelően oda kerül a FormData is. Dolgozzunk ezzel.

Kezdésként nyissuk meg a edit.jsx fájlunkat és importáljuk a updateProduct-ot:

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

Ezután írunk egy függvényt az útvonal objektum action számára, ahogy korábban is tettük. Adjuk hozzá közvetlenül a loader függvény után. Átadjuk neki a request-ünket és az URL paramétereket:

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

A kérésből kinyerjük a FormData-t, majd átalakítjuk az adatokat egy olyan objektummá, amely kulcs: érték párokat tartalmaz, és a updateProduct segítségével elküldjük ezeket az adatokat a tárolóba:

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

Már csak a main.jsx fájlba kell bemennünk, és hozzá kell adnunk a action függvényt a szerkesztési útvonal objektumához. Importáljuk a action-t:

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

És adjuk hozzá a szerkesztési útvonal objektumához:

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

Indítsa el most az alkalmazást, adjon hozzá pár terméket a listához, majd kattintson rájuk, töltse ki az űrlapot, és nyomja meg a mentés gombot. Ne felejtse el ellátogatni a fejlesztői eszközök paneljének localforage szakaszába és frissíteni a tárolót. Most a keyvaluespairs szakaszban láthatjuk az objektumokat a products tömbben a mi megadott adatainkkal.