Ustvarjanje poti za urejanje podatkov v React Router

V prejšnji lekciji smo ustvarili obrazec za urejanje v ločeni React komponenti EditProduct.

Zdaj pa napišimo funkcijo nalagalnika za novo pot takoj po uvozu in pred funkcijo EditProduct. Bila bo enaka kot v product.jsx. V funkcijo bodo predani URL parametri in nato bomo pridobili produkt po njegovem id:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Uvažajmo getProduct iz forStorage.js:

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

Zdaj bomo odprli naš main.jsx in uvažali komponento, ki smo jo ustvarili EditProduct in nalagalnik:

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

Nato dodajmo v matriko children objekt poti za urejanje takoj za potjo za produkt:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
	{
		path: 'products/:productId/edit',
		element: <EditProduct />,
		loader: editProductLoader,
	},
],

Zdaj zaženimo aplikacijo, ustvarimo produkt, kliknimo nanj, nato pa na gumb za urejanje in videli bomo naš obrazec.

Edino, kar moramo še narediti, je, da so v poljih obrazca pred urejanjem naloženi trenutni podatki. Za to uvozimo v edit.jsx kavelj useLoaderData:

import { Form, useLoaderData } from 'react-router-dom';

In ga uporabimo za pridobivanje podatkov iz nalagalnika v funkciji EditProduct. Dodajmo ga pred ukaz return:

const { product } = useLoaderData();

Zdaj dodajmo v vsak označevalnik vnosno polje atribut defaultValue z ustreznimi vrednostmi za vsako vnosno polje. Na primer, prvo vnosno polje bo zdaj videti takole:

<input
	placeholder="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

Za preostali dve vnosni polji bodo vrednosti ustrezno 'product.cost' in 'product.amount'. Resda za zdaj podatkov v obrazcu še nimamo.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva lekcije ustvarite funkcijo loader v edit.jsx za pot urejanja podatkov študenta.

Dodajte v matriko children objekt poti za urejanje.

Dodajte za vašo funkcijo EditStudent zahtevano kodo iz lekcije.