Opdatering af data med FormData i React Router

Vi har en funktion updateProduct til at opdatere produktdata i lagringen. Lad os nu gå videre til dataene fra vores redigeringsformular.

Når en HTML-formular sendes, opretter browseren et FormData-objekt med dataene og sender det i anmodningens krop til serveren. Desuden udtrækkes værdien af hvert inputfelt til objektet fra attributten name (derfor havde vi brug for dem i formularen, husker I?). Vi ved nu, at React Router sender anmodninger ikke til serveren, men til metoden action i vores rute, følgelig vil FormData ende der. Lad os arbejde med dette.

Til at starte med, lad os åbne vores fil edit.jsx og importere updateProduct:

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

Derefter skriver vi en funktion for action i ruteobjektet, som vi gjorde tidligere. Lad os tilføje den straks efter loader-funktionen. Vi vil give den vores request og URL-parametre:

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

Fra anmodningen vil vi få FormData, derefter udtrække dataene fra det som et objekt, der indeholder nøgle: værdi-par og ved hjælp af updateProduct sende disse data til lagringen:

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

Der er kun tilbage at gå ind i main.jsx og tilføje funktionen action til objektet for redigeringsruten. Lad os importere action:

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

Og tilføje den til redigeringsroutens objekt:

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

Start nu applikationen, tilføj et par produkter til listen, klik derefter på dem, udfyld formularen og tryk på gem-knappen. Glem ikke at gå ind i udviklerpanelet under localforage og opdatere lagringen. Nu kan vi i sektionen keyvaluespairs se objekterne i arrayet products med vores indtastede data.

Tag den applikation, du oprettede i opgaverne til den forrige lektion. Brug materialet fra lektionen, opret en funktion action for ruten til redigering af studerendes data, tilføj den til objektet for redigeringsruten. Åbn udviklerpanelet og sikr dig, at ved ændringer vises de opdaterede data virkelig under fanen localforage.