Տվյալների թարմացում FormData-ով React Router-ում

Մենք ունենք updateProduct ֆունկցիա պահեստում ապրանքի տվյալները թարմացնելու համար: Այժմ անցնենք մեր խմբագրման ձևից ստացված տվյալներին:

HTML-ձևը ուղարկելիս բրաուզերը ստեղծում է FormData օբյեկտ տվյալներով և ուղարկում է այն հարցման մարմնում սերվեր: Ընդ որում, յուրաքանչյուր Ինփութի արժեքը դուրս է բերվում օբյեկտի մեջ name ատրիբուտից (այդ իսկ պատճառով դրանք մեզ պետք էին ձևում, հիշու՞մ եք): Մենք այժմ գիտենք, որ React Router-ը հարցումներ է ուղարկում ոչ թե սերվեր, այլ մեր երթուղու action մեթոդին, համապատասխանաբար, այնտեղ կհայտնվի նաև FormData-ը: Եկեք աշխատենք դրա հետ:

Սկսելու համար բացենք մեր edit.jsx ֆայլը և իմպորտենք updateProduct-ը:

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

Այնուհետև մենք կգրենք ֆունկցիա երթուղու օբյեկտի action-ի համար, ինչպես արել էինք նախկինում: Ավելացնենք այն անմիջապես loader ֆունկցիայից հետո: Մենք դրան կփոխանցենք մեր 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 զանգվածում մեր մուտքագրված տվյալներով:

Վերցրեք նախորդ դասի առաջադրանքներում ձեր ստեղծած հավելվածը: Օգտագործելով դասի նյութերը, ստեղծեք ֆունկցիա action ուսանողի տվյալները խմբագրելու երթուղու համար, ավելացրեք այն խմբագրման երթուղու օբյեկտում: Բացեք մշակողի վահանակը և համոզվեք, որ փոփոխությունների դեպքում թարմացված տվյալները իսկապես ցուցադրվում են localforage ներդիրում: