Andmete uuendamine FormData abil React Routeris

Meil on funktsioon updateProduct toodeandmete uuendamiseks andmebaasis. Nüüd liigume edasi meie muutmismoodussi andmete juurde.

HTML-vormi saatmisel loob brauser objekti FormData andmetega ja saadab selle päringu kehas serverisse. Pealegi ekstraktitakse iga sisendi väärtus objekti atribuudi name põhjal (sellepärast meil olidgi vormis need atribuudid vajalikud, mäletate?). Me teame nüüd, et React Router saadab päringud mitte serverisse, vaid marsruudi meetodisse action, vastavalt sellele sinna satub ka FormData. Hakkame sellega tööle.

Alustuseks avame oma faili edit.jsx ja impordime updateProduct:

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

Seejärel kirjutame funktsiooni marsruudi objekti action jaoks, nagu me seda varem tegime. Lisame selle kohe pärast funktsiooni loader. Sellele edastame oma request ja URL-i parameetrid:

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

Päringust saame FormData, seejärel ekstraheerime sellest andmed objektina, mis sisaldab paare võti: väärtus ja kasutades updateProduct saadame need andmed andmebaasi:

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

Jääb vaid minna faili main.jsx ja lisada funktsioon action muutmismarsruudi objekti. Impordime action:

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

Ja lisame selle muutmismarsruudi objekti:

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

Käivitage nüüd rakendus, lisage paar toodet loendisse, seejärel klõpsates neil täitke vorm ja vajutage salvestusnupule. Ärge unustage minna arendusvahendite paneeli jaoksi localforage ja värskendada andmebaasi. Nüüd jaotises keyvaluespairs näeme objekte massiivis products meie sissetoodud andmetega.

Võtke rakendus, mille lõite eelmise õppetüki ülesannetes. Kasutades õppetüki materjale, looge funktsioon action õpilase andmete muutmise marsruudi jaoks, lisage see muutmismarsruudi objekti. Avage arendusvahendite paneel ja veenduge, et muudatuste korral uuendatud andmed kuvatakse tõesti vahekaardil localforage.