React Routerда FormData орқали маълумотларни янгилаш

Бизда дўкондаги маҳсулот маълумотларини янгилаш учун updateProduct функцияси мавжуд. Энди таҳрирлаш шаклимиздан келган маълумотларга ўтамиз.

HTML-шакл жўнатилганда, браузер FormData объектини яратиб, уни серверга сўров танасида жўнатади. Ҳар бир киритиш maydonining қиймати name атрибутидан олинади (шақлда уларнинг зарурлигини эслайсизми?). Билганимиздек, React Router сўровларни серверга эмас, балки маршрутимизнинг action методига жўнатади, шу сабабли FormData ҳам ўша жойга боради. Келинг, бу билан иш чиқайлик.

Бошлаш учун, edit.jsx файлимизни очиб, updateProduct ни импорт қиламиз:

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

Сўнгра маршрут объекти учун action функциясини ёзамиз, буни илгари ҳам қилганмиз. Уни loader функциясидан кейин ҳамма joyiga қўшамиз. Унга биз request ва URL параметрларимизни ўтказамиз:

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

Сўровдан FormData ни оламиз, сўнгра ундан калит: қиймат жуфтларидан иборат объект шаклида маълумотларни ажратамиз ва updateProduct ёрдамида ушбу маълумотларни дўконга жўнатамиз:

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

Қолган иш main.jsx га кириб, action функциясини таҳрирлаш маршрути объектига қўшиш. action ни импорт қиламиз:

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

Ва уни таҳрирлаш маршрути объектига қўшамиз:

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

Энди иловани ишга туширинг, рўйхатга бир нечта маҳсулот қўшинг, сўнгра уларни босиб, шаклни тўлдиринг ва сақлаш тугмасини босинг. Ишлаб чиқувчи панелидаги localforage бўлимига кириб, дўконни янгилашни унутмангинг. Энди keyvaluespairs бўлимида биз products массивидаги объектларни киритган маълумотларимиз билан кўрамиз.

Сиз ўтган дарс учун topshirigda яратган иловангизни олинг. Дарс материалларидан фойдаланиб, талаба маълумотларини тахрирлаш маршрути учун action функциясини яратинг, уни тахрирлаш маршрути объектига қўшинг. Ишлаб чиқувчи панелини очиб, ўзгартиришлар киритилганда, янгиланган маълумотлар localforage ички ойнасида кўрсатилишини текширинг.