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:

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

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

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

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

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

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

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulé lekci. Použijte materiály lekce, vytvořte funkci action pro trasu editace dat studenta, přidejte ji do objektu trasy editace. Otevřete panel vývojáře a ujistěte se, že při změnách se aktualizovaná data skutečně zobrazují na kartě localforage.