Aggiornamento dei dati con FormData in React Router

Abbiamo la funzione updateProduct per aggiornare i dati del prodotto nell'archivio. Ora passiamo ai dati dal nostro modulo di modifica.

All'invio di un modulo HTML, il browser crea un oggetto FormData con i dati e lo invia nel corpo della richiesta al server. Inoltre, il valore di ogni input viene estratto nell'oggetto dall'attributo name (ecco perché ci servivano nel modulo, ricordi?). Noi ora sappiamo che React Router invia le richieste non al server, ma al metodo action della nostra route, di conseguenza, lì finirà anche FormData. Lavoriamo con questo.

Per cominciare apriamo il nostro file edit.jsx e importiamo updateProduct:

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

Poi scriveremo la funzione per action dell'oggetto route, come abbiamo fatto prima. Aggiungiamola subito dopo la funzione loader. Le passeremo la nostra request e i parametri URL:

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

Dalla richiesta otterremo FormData, poi ne estrarremo i dati sotto forma di oggetto, contenente coppie chiave: valore e con updateProduct invieremo questi dati nell'archivio:

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

Resta solo andare in main.jsx e aggiungere la funzione action nell'oggetto della route di modifica. Importiamo action:

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

E aggiungiamolo all'oggetto route di modifica:

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

Avvia ora l'applicazione, aggiungi un paio di prodotti alla lista, poi cliccando su di loro compila il modulo e premi sul pulsante salva. Non dimenticare di andare nel pannello dello sviluppatore nella sezione localforage e aggiornare l'archivio. Ora nella sezione keyvaluespairs possiamo vedere gli oggetti nell'array products con i nostri dati inseriti.

Prendi l'applicazione, creata da te nei compiti della lezione precedente. Usando i materiali della lezione, crea la funzione action per la route di modifica dei dati dello studente, aggiungila all'oggetto della route di modifica. Apri il pannello dello sviluppatore e assicurati che alle modifiche i dati aggiornati vengano effettivamente visualizzati nella scheda localforage.