Ma'lumotlarni FormData bilan React Router'da yangilash

Bizda ombordagi mahsulot ma'lumotlarini yangilash uchun updateProduct funksiyasi mavjud. Endi tahrirlash shaklimizdan ma'lumotlarni olamiz.

HTML-shakl yuborilganda, brauzer FormData obyektini yaratadi va uni so'rov tanalasi sifatida serverga yuboradi. Bundan tashqari, har bir kirish maydonining qiymati name atributidan obyektga olinadi (shuning uchun ular bizga shaklda kerak edi, eslaysizmi?). Endi biz bilamizki, React Router so'rovlarni serverga emas, balki marshrutimizning action metodiga yuboradi, shuning uchun FormData ham u erga boradi. Keling, bu bilan ishlaymiz.

Boshlash uchun edit.jsx faylimizni ochamiz va updateProduct ni import qilamiz:

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

Keyin biz avval qilganimiz kabi, marshrut obyekti uchun action funksiyasini yozamiz. Uni loader funksiyasidan keyin darrov qo'shamiz. Unga biz request va URL parametrlarini uzatamiz:

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

So'rovdan FormData ni olamiz, keyin undan kalit: qiymat juftliklarini o'z ichiga olgan obyekt shaklida ma'lumotlarni ajratib olamiz va updateProduct yordamida ushbu ma'lumotlarni omborga yuboramiz:

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

Faqat main.jsx ga kirib, action funksiyasini tahrirlash marshruti obyektiga qo'shish qoldi. Keling, action ni import qilamiz:

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

Va uni tahrirlash marshruti obyektiga qo'shamiz:

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

Endi ilovani ishga tushiring, ro'yxatga bir nechta mahsulot qo'shing, keyin ularni bosish orqali shaklni to'ldiring va saqlash tugmasini bosing. Ishlab chiqaruvchi panelida localforage bo'limiga kirib, omborni yangilashni unutmang. Endi keyvaluespairs bo'limida biz products massividagi obyektlarni kiritilgan ma'lumotlarimiz bilan ko'rishimiz mumkin.

Oldingi dars uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, talaba ma'lumotlarini tahrirlash marshruti uchun action funksiyasini yarating, uni tahrirlash marshruti obyektiga qo'shing. Ishlab chiqaruvchi panelini oching va o'zgartirishlar kiritilganda yangilangan ma'lumotlar localforage yorlig'ida haqiqatdan ham aks etayotganligiga ishonch hosil qiling.