Përditësimi i të Dhënave me FormData në React Router

Ne kemi funksionin updateProduct për përditësimin e të dhënave të produktit në depo. Tani le të kalojmë te të dhënat nga forma jonë e modifikimit.

Gjatë dërgimit të një forme HTML, shfletuesi krijon një objekt FormData me të dhëna dhe dërgon atë në trupin e kërkesës për në server. Për më tepër, vlera e çdo inputi nxirret në objekt nga atributi name (prandaj ato na duheshin në formë, e mbani mend?). Ne tani e dimë se React Router dërgon kërkesa jo në server, por në metodën action të rrugës sonë, në përputhje me rrethanat, atje do të përfundojë edhe FormData. Le të punojmë me këtë.

Për fillim, le të hapim skedarin tonë edit.jsx dhe të importojmë updateProduct:

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

Pastaj do të shkruajmë një funksion për action të objektit të rrugës, siç e kemi bërë më parë. Le ta shtojmë atë menjëherë pas funksionit loader. Asaj do t'i传递jmë request tonë dhe parametrat e URL:

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

Nga kërkesa, ne do të marrim FormData, pastaj do të nxjerrim të dhënat prej saj në formë objekti, që përmban çiftet çelës: vlerë dhe me ndihmën e updateProduct do të dërgojmë këto të dhëna në depo:

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

Mbetet vetëm të shkojmë në main.jsx dhe të shtojmë funksionin action në objektin e rrugës së modifikimit. Le të importojmë action:

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

Dhe ta shtojmë atë në objektin e rrugës së modifikimit:

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

Tani nisni aplikacionin, shtoni disa produkte në listë, pastaj duke klikuar mbi to plotësoni formën dhe shtypni butonin e ruajtjes. Mos harroni të shkoni në panelin e zhvilluesit në seksionin localforage dhe të rifreskoni depon. Tani në seksionin keyvaluespairs mund të shohim objektet në vargun products me të dhënat tona të vendosura.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimit të kaluar. Duke përdorur materialet e mësimit, krijoni funksionin action për rrugën e modifikimit të të dhënave të studentit, shtojeni atë në objektin e rrugës së modifikimit. Hapni panelin e zhvilluesit dhe sigurohuni që gjatë ndryshimeve të dhënat e përditësuara shfaqen me të vërtetë në skedën localforage.