Actualizarea datelor cu FormData în React Router

Avem funcția updateProduct pentru actualizarea datelor produsului în stocare. Acum să trecem la datele din formularul nostru de editare.

La trimiterea unui formular HTML, browserul creează un obiect FormData cu datele și le trimite în corpul cererii către server. Mai mult, valoarea fiecărui input este extrasă în obiect din atributul name (de aceea erau necesare pentru noi în formular, vă amintiți?). Noi acum știm că React Router trimite cereri nu către server, ci în metoda action a rutei noastre, în consecință, acolo va ajunge și FormData. Hai să lucrăm cu asta.

Pentru început să deschidem fișierul nostru edit.jsx și să importăm updateProduct:

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

Apoi vom scrie funcția pentru action obiectului rutei, așa cum am făcut-o mai înainte. O vom adăuga imediat după funcția loader. Îi vom transmite request-ul nostru și parametrii URL:

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

Din cerere vom obține FormData, apoi vom extrage din el datele sub formă de obiect, conținând perechi cheie: valoare și cu ajutorul updateProduct vom trimite aceste date în stocare:

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

Mai rămâne doar să intrăm în main.jsx și să adăugăm funcția action în obiectul rutei de editare. Să importăm action:

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

Și să-l adăugăm în obiectul rutei de editare:

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

Porniți acum aplicația, adăugați câteva produse în listă, apoi făcând clic pe ele completați formularul și apăsați pe butonul de salvare. Nu uitați să intrați în panoul dezvoltatorului în secțiunea localforage și să actualizați stocarea. Acum în secțiunea keyvaluespairs putem vedea obiecte în matricea products cu datele noastre introduse.

Luați aplicația creată de dvs. în sarcinile din lecția trecută. Folosind materialele lecției, creați funcția action pentru ruta de editare a datelor studentului, adăugați-o în obiectul rutei de editare. Deschideți panoul dezvoltatorului și asigurați-vă că la modificări datele actualizate se afișează într-adevăr pe fila localforage.