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