React Router менен FormData аркылуу маалыматтарды жаңыртуу

Биздин товардын маалыматтарын сактоочу жайга жаңыртуу үчүн updateProduct функциябыз бар. Эми биздин түзөтүү формабыздан маалыматтарга өтөлү.

HTML-форма жөнөтүлгөндө, браузер FormData объектисин маалыматтар менен түзөт жана аны серверге сурамдын денесине жөнөтөт. Үстөк, ар бир inputтун мааниси объектке 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 вкладкасында чын эле көрсөтүлөрүн текшериңиз.