# Обновление данных с 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.

← →
↑