Ажурирање на податоци со 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.