Обновление данных с FormData в React Router

У нас есть функция updateProduct для обновления данных продукта в хранилище. Теперь перейдем к данным из нашей формы для редактирования.

При отправке HTML-формы браузер создает объект FormData с данными и посылает его в теле запроса на сервер. Причем, значение каждого инпута извлекается в объект из атрибута name (поэтому они и были нужны нам в форме, помните?). Мы теперь знаем, что React Router отправляет запросы не на сервер, а в метод action нашего маршрута, соответственно, туда попадет и FormData. Давайте поработаем с этим.

Для начала откроем наш файлик edit.jsx и импортируем updateProduct:

routes/edit.jsximport { updateProduct } from '../forStorage';

Затем мы напишем функцию для action объекта маршрута, как делали это раньше. Добавим ее сразу после функции loader. Ей мы будем передавать наш request и URL параметры:

routes/edit.jsxexport async function action({ request, params }) {}

Из запроса мы получим FormData, затем извлечем из него данные в виде объекта, содержащего пары ключ: значение и с помощью updateProduct отправим эти данные в хранилище:

routes/edit.jsxexport 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:

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

И добавим его в объект маршрута редактирования:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

Запустите теперь приложение, добавьте пару продуктов в список, затем кликая по ним заполняйте форму и нажимайте на кнопку сохранения. Не забудьте зайти в панель разработчика в раздел localforage и обновлять хранилище. Теперь в разделе keyvaluespairs мы можем видеть объекты в массиве products с нашими внесенными данными.