Деректерді өңдеу үшін маршрут жасау 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="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

Қалған екі енгізу үшін мәндер сәйкесінше 'product.cost' және 'product.amount' болады. Алайда әлі формада бізде деректер жоқ.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, студент деректерін өңдеу маршруты үшін edit.jsx-та loader функциясын жасаңыз.

children массивіне өңдеу үшін маршрут объектісін қосыңыз.

EditStudent функцияңызға сабақта талған кодты қосыңыз.