Uppdatera data med FormData i React Router

Vi har en funktion updateProduct för att uppdatera produktdata i lagret. Låt oss nu gå vidare till data från vårt redigeringsformulär.

När ett HTML-formulär skickas skapar webbläsaren ett FormData-objekt med data och skickar det i förfrågan till servern. Värdet för varje inputfält extraheras till objektet från attributet name (det är därför vi behövde dem i formuläret, kommer du ihåg?). Vi vet nu att React Router skickar förfrågningar inte till servern, utan till metoden action i vår rutt, följaktligen kommer FormData att hamna där. Låt oss arbeta med detta.

Låt oss först öppna vår fil edit.jsx och importera updateProduct:

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

Sedan skriver vi en funktion för action i ruttobjektet, som vi gjorde tidigare. Låt oss lägga till den direkt efter funktionen loader. Vi kommer att skicka vår request och URL-parametrar till den:

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

Från förfrågan kommer vi att få FormData, sedan extrahera data från den till ett objekt innehållande par av nyckel: värde och med hjälp av updateProduct skicka dessa data till lagret:

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

Återstår bara att gå till main.jsx och lägga till funktionen action i redigeringsruttens objekt. Importera action:

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

Och lägg till den i redigeringsrutten:

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

Starta nu applikationen, lägg till några produkter i listan, fyll sedan i formuläret genom att klicka på dem och tryck på spara-knappen. Glöm inte att gå in i utvecklarpanelen i avdelningen localforage och uppdatera lagringen. Nu i avdelningen keyvaluespairs kan vi se objekten i arrayen products med våra inskrivna data.

Ta applikationen du skapade i uppgifterna från förra lektionen. Använd materialet från lektionen, skapa en funktion action för rutter för att redigera studentdata, lägg till den i redigeringsrutten. Öppna utvecklarpanelen och se till att vid ändringar visas uppdaterade data verkligen på fliken localforage.