Məlumatların FormData ilə React Router-də Yenilənməsi

Bizim anbarda məhsul məlumatlarını yeniləmək üçün updateProduct funksiyası var. İndi isə redaktə formasından gələn məlumatlara keçək.

HTML forması göndərildikdə, brauzer FormData obyektini yaradır və onu sorğunun gövdəsində serverə göndərir. Üstəlik, hər bir inputun dəyəri name atributundan obyektə çıxarılır (buna görə də onlar formada lazım idi, xatırlayırsınız?). Biz indi bilirik ki, React Router sorğuları serverə deyil, marşrutumuzun action metoduna göndərir, müvafiq olaraq, orada FormData da olacaq. Gəlin bununla işləyək.

Əvvəlcə edit.jsx faylımızı açaq və updateProduct import edək:

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

Sonra marşrut obyekti üçün action funksiyasını yazacağıq, əvvəl etdiyimiz kimi. Onu loader funksiyasından dərhal sonra əlavə edək. Ona request və URL parametrlərini ötürəcəyik:

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

Sorğudan FormData alacağıq, sonra ondan məlumatları açar: dəyər cütlərini ehtiva edən obyekt şəklində çıxaracağıq və updateProduct köməyi ilə bu məlumatları anbara göndərəcəyik:

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

Yalnız main.jsx faylına getmək və action funksiyasını redaktə marşrutunun obyektinə əlavə etmək qalır. Gəlin action import edək:

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

Və onu redaktə marşrutunun obyektinə əlavə edək:

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

İndi proqramı işə salın, siyahıya bir neçə məhsul əlavə edin, sonra onlara klikləyərək formanı doldurun və saxla düyməsini basın. Developer panelində localforage bölməsinə daxil olmağı və anbarı yeniləməyi unutmayın. İndi keyvaluespairs bölməsində biz products massivində daxil etdiyimiz məlumatlar olan obyektləri görə bilərik.

Əvvəlki dərsin tapşırıqlarında yaratdığınız proqramı götürün. Dərsin materiallarından istifadə edərək, tələbə məlumatlarını redaktə etmək marşrutu üçün action funksiyası yaradın, onu redaktə marşrutunun obyektinə əlavə edin. Developer panelini açın və dəyişikliklər zamanı yenilənmiş məlumatların həqiqətən də localforage vərəqində göstərildiyinə əmin olun.