Տվյալների խմբագրման երթուղու ստեղծում React Router-ում

Անցյալ դասին մենք ստեղծեցինք ձև խմբագրման համար առանձին React կոմպոնենտում EditProduct:

Այժմ եկեք գրենք բեռնիչ ֆունկցիա նոր երթուղու համար անմիջապես իմպորտից հետո և EditProduct ֆունկցիայից առաջ: Այն կլինի նույնը, ինչ product.jsx-ում: Ֆունկցիային կանցնեն URL պարամետրերը և ապա մենք կստանանք ապրանքը ըստ նրա id-ի:

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

Իմպորտենք getProduct-ը forStorage.js ֆայլից:

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

Այժմ մենք կբացենք մեր main.jsx ֆայլը և կիմպորտենք մեր ստեղծած կոմպոնենտը EditProduct և բեռնիչը:

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

Ապա կավելացնենք children զանգվածում խմբագրման երթուղու օբյեկտը անմիջապես ապրանքի երթուղուց հետո:

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

Այժմ եկեք գործարկենք հավելվածը, ստեղծենք ապրանք, կտտացնենք դրան, ապա խմբագրման կոճակի վրա և կտեսնենք մեր ձևը:

Միակ բանը, որ դեռ պետք է անենք, դա ապահովել, որ դաշտերում խմբագրմանից առաջ բեռնվեն ընթացիկ տվյալները: Դրա համար մենք կիմպորտենք edit.jsx ֆայլում useLoaderData հուքը:

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

Եվ կկիրառենք այն տվյալները ստանալու համար բեռնիչից EditProduct ֆունկցիայում: Ավելացնենք այն return հրամանից առաջ:

const { product } = useLoaderData();

Այժմ ավելացնենք յուրաքանչյուր ինպուտ թեգում ատրիբուտ defaultValue համապատասխան արժեքներով յուրաքանչյուր ինպուտի համար: Օրինակ, առաջին ինպուտը այժմ այսպիսի տեսք կունենա:

<input
	placeholder="անուն"
	type="text"
	name="name"
	defaultValue={product.name}
/>

Մնացած երկու ինպուտների համար արժեքները կլինեն համապատասխանաբար 'product.cost' և 'product.amount': Ճիշտ է, առայժմ տվյալներ ձևում մենք չունենք:

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերին առաջադրանքներում: Օգտագործելով դասի նյութերը, ստեղծեք ֆունկցիա loader edit.jsx ֆայլում ուսանողի տվյալների խմբագրման երթուղու համար:

Ավելացրեք children զանգվածում խմբագրման երթուղու օբյեկտ:

Ավելացրեք ձեր EditStudent ֆունկցիայի համար դասում պահանջվող կոդը: