Duomenų atnaujinimas su FormData React Router

Mes turime funkciją updateProduct produkto duomenų atnaujinimui saugykloje. Dabar pereikime prie duomenų iš mūsų redagavimo formos.

Kai HTML forma yra pateikiama, naršyklė sukuria FormData objektą su duomenimis ir siunčia jį užklausos kūne į serverį. Be to, kiekvienos įvesties reikšmė yra išgaunama į objektą iš name atributo (todėl jie mums ir buvo reikalingi formoje, prisimenate?). Mes dabar žinome, kad React Router siunčia užklausas ne į serverį, o į maršruto action metodą, atitinkamai, ten pateks ir FormData. Pažiūrėkime kaip su tuo dirbti.

Pirmiausia atidarykime mūsų failą edit.jsx ir importuokime updateProduct:

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

Tada parašysime funkciją action maršruto objektui, kaip darėme anksčiau. Pridėkime ją iškart po funkcijos loader. Jai mes perduosime mūsų request ir URL parametrus:

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

Iš užklausos gausime FormData, tada išgausime iš jo duomenis kaip objektą, turinčią poras raktas: reikšmė ir naudodami updateProduct išsiųsime šiuos duomenis į saugyklą:

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

Beliko tik nueiti į main.jsx ir pridėti funkciją action į redagavimo maršruto objektą. Importuokime action:

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

Ir pridėkime jį į redagavimo maršruto objektą:

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

Dabar paleiskite programą, pridėkite keletą produktų į sąrašą, tada spustelėdami juos užpildykite formą ir spustelėkite išsaugojimo mygtuką. Nepamirškite nueiti į kūrėjo skydelį į localforage skiltį ir atnaujinti saugyklą. Dabar keyvaluespairs skiltyje galime matyti objektus masyve products su mūsų įvestais duomenimis.

Paimkite programą, kurią sukūrėte užduotyse paskutinei pamokai. Naudodamiesi pamokos medžiaga, sukurkite funkciją action studento duomenų redagavimo maršrutui, pridėkite ją į redagavimo maršruto objektą. Atidarykite kūrėjo skydelį ir įsitikinkite, kad keitimams atlikus atnaujinti duomenys iš tikrųjų rodomi localforage skirtuke.