Opdatering van Data met FormData in React Router

Ons het 'n funksie updateProduct om produkdata in die stoor op te dateer. Laat ons nou voortgaan na die data van ons redigeervorm.

Wanneer 'n HTML-vorm gestuur word, skep die blaaier 'n FormData-objek met die data en stuur dit in die versoekliggaam na die bediener. Die waarde van elke invoerveld word onttrek na die objek vanaf die name-kenmerk (dit is hoekom ons dit in die vorm nodig gehad het, onthou jy?). Ons weet nou dat React Router versoeke nie na die bediener stuur nie, maar na die action-metode van ons roete, gevolglik sal die FormData ook daar beland. Kom ons werk hiermee.

Om te begin, maak ons ons lêer edit.jsx oop en voer updateProduct in:

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

Dan sal ons 'n funksie vir die action van die roete-objek skryf, soos ons voorheen gedoen het. Laat ons dit dadelik na die loader-funksie byvoeg. Ons sal ons request en URL-parameters daaraan oorhandig:

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

Van die versoek sal ons die FormData kry, dan die data daaruit onttrek in die vorm van 'n objek wat pare sleutel: waarde bevat en met behulp van updateProduct hierdie data na die stoor stuur:

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

Die enigste ding wat oorbly is om na main.jsx te gaan en die action-funksie by die redigeerroete se objek by te voeg. Kom ons voer die action in:

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

En voeg dit by die redigeerroete se objek:

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

Laat jou toepassing nou loop, voeg 'n paar produkte by die lys, vul dan die vorm in deur daarop te klik en druk op die stoorknoppie. Moenie vergeet om na die ontwikkelaarspaneel te gaan onder die localforage-afdeling en die stoor te verfris nie. Nou kan ons in die keyvaluespairs-afdeling die voorwerpe in die products-skikking sien met ons ingevoerde data.

Neem die toepassing wat jy in die opdragte van die vorige les geskep het. Deur van die lesmateriaal gebruik te maak, skep 'n funksie action vir die roete om studentedata te redigeer, voeg dit by die redigeerroete se objek. Maak die ontwikkelaarspaneel oop en maak seker dat wanneer veranderinge gemaak word, die opgedateerde data inderdaad op die localforage-oortjie vertoon word.