Datu atjaunināšana ar FormData React Router

Mums ir funkcija updateProduct, lai atjauninātu produkta datus glabātavā. Tagad pāriesim pie datiem no mūsu rediģēšanas formas.

Iesniedzot HTML formu, pārlūkprogramma izveido FormData objektu ar datiem un nosūta to pieprasījuma pamatā uz serveri. Turklāt katras ievades lauka vērtība tiek iegūta objektā no name atribūta (tāpēc tie mums bija vajadzīgi formā, atceraties?). Mēs tagad zinām, ka React Router nosūta pieprasījumus ne uz serveri, bet uz mūsu maršruta metodi action, attiecīgi, tur nokļūs arī FormData. Strādāsim ar to.

Vispirms atveram mūsu failu edit.jsx un importējam updateProduct:

import { updateProduct } from '../forStorage';

Tad mēs uzrakstīsim funkciju maršruta objekta action, kā to darījām iepriekš. Pievienosim to uzreiz pēc funkcijas loader. Tai mēs nodosim mūsu request un URL parametrus:

export async function action({ request, params }) {}

No pieprasījuma mēs iegūsim FormData, tad izvilksim no tā datus objekta veidā, saturētāju pārus atslēga: vērtība un ar updateProduct palīdzību nosūtīsim šos datus glabātavā:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Atliek tikai iet uz main.jsx un pievienot funkciju action rediģēšanas maršruta objektam. Importējam action:

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

Un pievienosim to rediģēšanas maršruta objektam:

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

Palaidiet tagad lietotni, pievienojiet pāris produktus sarakstam, tad noklikšķinot uz tiem aizpildiet formu un nospiediet uz saglabāšanas pogas. Neaizmirstiet iet uz izstrādātāju paneli sadaļā localforage un atsvaidzināt glabātavu. Tagad sadaļā keyvaluespairs mēs varam redzēt objektus massīvā products ar mūsu ievadītajiem datiem.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējai nodarbībai. Izmantojot nodarbības materiālus, izveidojiet funkciju action studenta datu rediģēšanas maršrutam, pievienojiet to rediģēšanas maršruta objektam. Atveriet izstrādātāja paneli un pārliecinieties, ka izmaiņu gadījumā atjauninātie dati tiešām tiek rādīti localforage cilnē.