React Router-daky maglumatlary redaktirlemek üçin ýol döretmek

Geçen sapakda biz aýratyn React komponentinde EditProduct redaktirlemek üçin forma döretdik.

Indi täze ýol üçin ýükleyji funksiýany importdan soň we EditProduct funksiýasyndan öň ýazalyň. Ol product.jsx-daky ýaly bolar. Funksiýa URL parametrlerini alar we soňra önümi onuň id-sine görä alarys:

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

getProduct-ni forStorage.js-dan import edeliň:

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

Indi bolsa biz main.jsx faylymyzy açarys we döreden komponentimiz EditProduct we ýükleyjini import ederis:

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

Soňra children massiwine önüm üçin ýoldan soň derhal redaktirlemek üçin ýol obýektini goşarys:

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

Indi programmany işledip, önüm döredip, oňa basyp, soňra redaktirleme düwmesine basyň we formamyzy göreris.

Ýöne bir zat, hem-de formanyň meýdanlarynda redaktirlemezden öň häzirki maglumatlaryň ýüklenmegini üpjün etmelidiris. Bunuň üçin biz edit.jsx faýlyna useLoaderData gogyjyny import ederis:

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

We ony EditProduct funksiýasynda ýükleyjiden maglumat almak üçin ulanarys. Ony return buýrugyndan öň goşarys:

const { product } = useLoaderData();

Indi her input tegine degişli bahalary bilen defaultValue atlysyny goşarys. Mysal üçin, birinji input şeýle görüner:

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

Galýan iki input üçin bahalar biziň 'product.cost' we 'product.amount' degişlidir. Şu wagtda formada maglumatymyz ýok.

Öňki sapaklardaky tabşyryklarda döreden programmaňyzy alyň. Sapak materyallaryny ulanyp, talybyň maglumatlaryny redaktirlemek üçin ýol üçin edit.jsx faýlynda loader funksiýasyny dörediň.

children massiwine redaktirlemek üçin ýol obýektini goşuň.

EditStudent funksiýaňyz üçin sapakda talap edilen kody goşuň.