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:

import { 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:

export 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:

export 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:

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

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

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

Vegye azt az alkalmazást, amelyet az előző lecke feladatai során készített. A lecke anyagait felhasználva hozzon létre egy action függvényt a diák adatainak szerkesztésére szolgáló útvonalhoz, adja hozzá a szerkesztési útvonal objektumához. Nyissa meg a fejlesztői eszközök panelt és győződjön meg arról, hogy a módosítások során a frissített adatok valóban megjelennek a localforage fülön.