Adatszerkesztési útvonal létrehozása a React Routerben

Az előző leckében létrehoztunk egy szerkesztő űrlapot különálló React komponensben EditProduct.

Most írjunk egy loader függvényt az új útvonalhoz az importok után és a EditProduct függvény előtt. Ez ugyanolyan lesz, mint a product.jsx fájlban. A függvénynek átadódnak az URL paraméterek, majd a terméket lekérjük annak id-ja alapján:

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

Importáljuk a getProduct függvényt a forStorage.js fájlból:

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

Most megnyitjuk a main.jsx fájlt és importáljuk a létrehozott komponenst EditProduct és a loader függvényt:

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

Ezután adjuk hozzá a children tömbhöz a szerkesztési útvonal objektumát közvetlenül a termék útvonala után:

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

Most indítsuk el az alkalmazást, hozzunk létre egy terméket, kattintsunk rá, majd a szerkesztés gombra és meglátjuk a űrlapunkat.

Egyetlen dolog, amit még meg kell tennünk, hogy az űrlap mezőiben a szerkesztés előtt betöltődjenek a jelenlegi adatok. Ehhez importáljuk a edit.jsx fájlba a useLoaderData hook-ot:

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

És alkalmazzuk a loader adatainak lekérésére a EditProduct függvényben. Helyezzük el a return parancs elé:

const { product } = useLoaderData();

Most adjunk hozzá minden input elemhez egy defaultValue attribútumot a megfelelő értékekkel minden egyes inputhoz. Például, az első input így fog kinézni:

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

A maradék két input értéke rendre 'product.cost' és 'product.amount' lesz. Igaz, egyelőre még nincsenek adataink az űrlapban.

Vegyétek azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készítettetek. A lecke anyagát használva, hozzatok létre egy loader függvényt a edit.jsx fájlban a diák adatainak szerkesztésére szolgáló útvonalhoz.

Adjátok hozzá a children tömbhöz a szerkesztési útvonal objektumát.

Adjuk hozzá a EditStudent függvényhez a leckében kért kódot.