Andmete redigeerimise marsruudi loomine React Routeris

Eelmises tunnis loome vormi redigeerimiseks eraldi React komponendis EditProduct.

Kirjutame nüüd laadimisfunktsiooni uue marsruudi jaoks kohe pärast importi ja enne funktsiooni EditProduct. See on sama, mis product.jsx failis. Funktsioonile edastatakse URL-i parameetrid ja seejärel saame toote selle id järgi:

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

Impordime getProduct forStorage.js failist:

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

Nüüd avame oma main.jsx faili ja impordime loodud komponendi EditProduct ja laadimisfunktsiooni:

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

Seejärel lisame massiivi children marsruudi objekti redigeerimiseks kohe pärast toote marsruuti:

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

Nüüd käivitame rakenduse, loome toote, klõpsame sellel ja seejärel redigeerimisnupul ja näeme oma vormikut.

Ainus, mida peame veel tegema, on veenduda, et vormi väljadele oleksid redigeerimise eel laaditud praegused andmed. Selleks impordime edit.jsx faili hook'i useLoaderData:

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

Ja rakendame seda andmete saamiseks laadurist funktsioonis EditProduct. Lisame selle enne return käsku:

const { product } = useLoaderData();

Nüüd lisame igale sisend-võtmele atribuudi defaultValue vastavate väärtustega iga sisendi jaoks. Näiteks esimene sisend näeb nüüd välja selline:

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

Kahe ülejäänud sisendi väärtused on vastavalt 'product.cost' ja 'product.amount'. Kuid praegu meil vormis andmeid veel pole.

Võtke rakendus, mille lõite eelmiste tundide ülesannetes. Kasutades tunni materjale, looge funktsioon loader edit.jsx failis õpilase andmete redigeerimise marsruudi jaoks.

Lisage massiivi children objekti marsruut redigeerimiseks.

Lisage oma funktsioonile EditStudent tunnis nõutud kood.