Posodabljanje podatkov s FormData v React Router

Imamo funkcijo updateProduct za posodabljanje podatkov izdelka v shrambi. Zdaj pa pojdimo k podatkom iz našega obrazca za urejanje.

Ko pošljemo HTML-obrazec, brskalnik ustvari objekt FormData s podatki in jih pošlje v telesu zahteve na strežnik. Poleg tega je vrednost vsakega vnosnega polja pridobljena v objekt iz atributa name (zato smo jih potrebovali v obrazcu, se spomnite?). Mi zdaj vemo, da React Router pošilja zahteve ne na strežnik, ampak v metodo action naše poti, v skladu s tem, tja pride tudi FormData. Delajmo s tem.

Za začetek odprimo našo datoteko edit.jsx in uvozimo updateProduct:

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

Nato bomo napisali funkcijo za action objekta poti, kot smo to počeli prej. Dodajmo jo takoj za funkcijo loader. Ji bomo posredovali naš request in URL parametre:

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

Iz zahteve bomo dobili FormData, nato bomo iz njega pridobili podatke v obliki objekta, ki vsebuje pare ključ: vrednost in s pomočjo updateProduct poslali te podatke v shrambo:

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

Ostane samo še, da gremo v main.jsx in dodamo funkcijo action v objekt poti za urejanje. Uvozimo action:

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

In ga dodajmo v objekt poti urejanja:

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

Zdaj zaženite aplikacijo, dodajte nekaj izdelkov na seznam, nato z klikom nanje izpolnite obrazec in pritisnite na gumb za shranjevanje. Ne pozabite iti v razvojno ploščo v razdelek localforage in osvežiti shrambe. Zdaj v razdelku keyvaluespairs lahko vidimo objekte v matriki products z našimi vnesenimi podatki.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnjo lekcijo. Z uporabo gradiva lekcije ustvarite funkcijo action za pot urejanja podatkov študenta, dodajte jo v objekt poti urejanja. Odprite razvojno ploščo in se prepričajte, da pri spremembah posodobljeni podatki resnično prikažejo na zavihtku localforage.