Aktualizácia údajov pomocou FormData v React Router

Máme funkciu updateProduct na aktualizáciu údajov produktu v úložisku. Teraz prejdime k údajom z našej editačného formulára.

Pri odosielaní HTML formulára prehliadač vytvorí objekt FormData s údajmi a odošle ho v tele požiadavky na server. Navyše, hodnota každého vstupného poľa je extrahovaná do objektu z atribútu name (preto sme ich potrebovali vo formulári, pamätáte?). My teraz vieme, že React Router odosiela požiadavky nie na server, ale do metódy action nášho smerovania, preto tam príde aj FormData. Poďme s tým pracovať.

Na začiatok otvorme náš súbor edit.jsx a importujme updateProduct:

import { updateProduct } from '../forStorage';

Potom napíšeme funkciu pre action objektu smerovania, ako sme to robili predtým. Pridajme ju hneď po funkcii loader. Budeme jej odovzdávať našu request a URL parametre:

export async function action({ request, params }) {}

Z požiadavky získame FormData, potom extrahujeme z neho údaje vo forme objektu, obsahujúceho páry kľúč: hodnota a pomocou updateProduct odošleme tieto údaje do úložiska:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Ostal už len zájsť do main.jsx a pridať funkciu action do objektu smerovania editácie. Importujme action:

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

A pridajme ho do objektu smerovania editácie:

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

Spustite teraz aplikáciu, pridajte pár produktov do zoznamu, potom kliknutím na nich vypĺňajte formulár a stláčajte tlačidlo uloženia. Nezabudnite ísť do panela vývojára v časti localforage a obnoviť úložisko. Teraz v časti keyvaluespairs môžeme vidieť objekty v poli products s našimi zadanými údajmi.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k minulej lekcii. Používajúc materiály lekcie, vytvorte funkciu action pre smerovanie editácie údajov študenta, pridajte ju do objektu smerovania editácie. Otvorte panel vývojára a presvedčte sa, že pri zmenách aktualizované údaje sa naozaj zobrazia na karte localforage.