Duomenų redagavimo maršruto sukūrimas React Router

Praėjusioje pamokoje mes sukūrėme formą redagavimui atskirame React komponente EditProduct.

Dabar sukurkime užkrovimo funkciją naujam maršrutui iškart po importo ir prieš funkciją EditProduct. Ji bus tokia pati kaip ir product.jsx. Į funkciją bus perduodami URL parametrai ir tada mes gausime produktą pagal jo id:

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

Importuokime getProduct iš forStorage.js:

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

Dabar atidarykime mūsų main.jsx ir importuokime mūsų sukurtą komponentą EditProduct ir užkrovėją:

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

Tada pridėkime į masyvą children maršruto objektą redagavimui iškart po produkto maršruto:

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

Dabar paleiskime programą, sukurkime produktą, spustelėkime jį, o tada mygtuką redagavimo ir pamatysime mūsų formą.

Vienintelis dalykas, kurį dar turime padaryti, kad formos laukuose prieš redagavimą būtų įkelti esami duomenys. Tam mes importuojame į edit.jsx hook'ą useLoaderData:

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

Ir pritaikykime jį duomenims gauti iš užkrovėjo funkcijoje EditProduct. Pridėkime jį prieš komandą return:

const { product } = useLoaderData();

Dabar pridėkime į kiekvieną input tag'ą atributą defaultValue su atitinkamomis reikšmėmis kiekvienam input'ui. Pavyzdžiui, pirmas input'as dabar atrodys taip:

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

Dviejų likusių input'ų reikšmės bus atitinkamai 'product.cost' ir 'product.amount'. Tiesa kol kas duomenų formoje mes neturime.

Paimkite programą, kurią sukūrėte užduotyse prie praėjusių pamokų. Naudodamiesi pamokos medžiaga, sukurkite funkciją loader edit.jsx studento duomenų redagavimo maršrutui.

Pridėkite į masyvą children objektą maršrutą redagavimui.

Pridėkite savo funkcijai EditStudent reikalingą pamokoje nurodytą kodą.