Деректерді 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 жақтаушасында көрсетілетініне көз жеткізіңіз.