Актуализиране на данни с 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.