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