Абнаўленне даных з 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.