Маълумотҳоро дар 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 hook-и useLoaderData-ро ворид мекунем:

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

Ва онро барои гирифтани маълумот аз боркунанда дар функсияи EditProduct истифода мебарем. Онро пеш аз дастур return илова мекунем:

const { product } = useLoaderData();

Ҳоло ба ҳар як теги вуруд атрибути defaultValue бо қиматҳои мувофиқ барои ҳар як вуруд илова мекунем. Масалан, аввалин вуруд ҳоло инҳо хоҳад буд:

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

Барои ду вуруди боқимонда қиматҳо мутаносибан 'product.cost' ва 'product.amount' хоҳанд буд. Аммо ҳоло дар шакл маълумот надорем.

Барномаеро, ки шумо дар вазифаҳо барои дарсҳои гузашта сохтаед, гиред. Бо истифода аз мӯҳтавои дарс, дар edit.jsx барои роҳи таҳрири маълумоти донишҷӯ функсияи loader-ро эҷод кунед.

Дар массиви children объекти роҳро барои таҳрир илова кунед.

Барои функсияи худ EditStudent рамзи талабкардашуда дар дарсро илова кунед.