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