მონაცემების განახლება 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 ჩანართზე.