Gegevens bijwerken met FormData in React Router

We hebben de functie updateProduct om productgegevens in de opslag bij te werken. Laten we nu verder gaan met de gegevens uit ons bewerkingsformulier.

Bij het verzenden van een HTML-formulier creëert de browser een FormData object met de gegevens en stuurt het in de body van het verzoek naar de server. Bovendien wordt de waarde van elke invoer onttrokken aan het object vanuit het name attribuut (daarom hadden we ze ook nodig in het formulier, herinner je je?). We weten nu dat React Router verzoeken niet naar de server stuurt, maar naar de action methode van onze route, dienovereenkomstig komt FormData daar ook terecht. Laten we hier mee aan de slag gaan.

Laten we om te beginnen ons bestand edit.jsx openen en updateProduct importeren:

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

Vervolgens schrijven we een functie voor de action van het route-object, zoals we eerder deden. Laten we het direct na de loader functie toevoegen. We zullen hier onze request en URL-parameters aan doorgeven:

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

Uit het verzoek halen we FormData, dan halen we de gegevens eruit in de vorm van een object, bevattende sleutel: waarde paren en met behulp van updateProduct sturen we deze gegevens naar de opslag:

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

Het enige dat rest is om naar main.jsx te gaan en de action functie toe te voegen aan het object van de bewerkingsroute. Laten we action importeren:

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

En voeg het toe aan het route-object voor bewerken:

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

Start nu de applicatie, voeg een aantal producten toe aan de lijst, klik vervolgens erop, vul het formulier in en druk op de opslaanknop. Vergeet niet naar het ontwikkelpaneel te gaan in het localforage gedeelte en de opslag te vernieuwen. Nu kunnen we in het keyvaluespairs gedeelte objecten zien in de array products met onze ingevoerde gegevens.

Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige les. Gebruikmakend van de lesmaterialen, creëer een functie action voor de route voor het bewerken van studentgegevens, voeg deze toe aan het object van de bewerkingsroute. Open het ontwikkelpaneel en zorg ervoor dat bij wijzigingen de bijgewerkte gegevens daadwerkelijk worden weergegeven op het tabblad localforage.