Kuunda Njia ya Kurekebisha Data katika React Router

Katika somo lilopita, tuliunda fomu ya kurekebisha katika sehemu tofauti ya React ya EditProduct.

Sasa tuandike kichaji (loader) kwa njia mpya (route) mara baada ya kuagiza (import) na kabla ya utendaji EditProduct. Itakuwa sawa na ile iliyo kwenye product.jsx. Vigezo vya URL vitapelekwa kwenye utendaji kisha tutapata bidhaa kwa kutumia id yake:

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

Tuagize getProduct kutoka kwenye forStorage.js:

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

Sasa tutafungua main.jsx yetu na kuagiza sehemu tuliyounda EditProduct na kichaji:

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

Kisha tuongeze kwenye safu (array) children kipengee cha njia (route object) ya kurekebisha mara moja baada ya njia ya bidhaa:

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

Sasa tianzishe programu (application), tuunde bidhaa, tubonyeze juu yake, kisha kwenye kitufe cha kurekebisha na tuone fomu yetu.

Kitu pekee, tunahitaji pia kufanya ili katika sehemu za fomu kabla ya kurekebisha zipakuliwe data ya sasa. Ili kufanya hivyo tunaagiza kwenye edit.jsx kutumia useLoaderData:

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

Na tutumie kupata data kutoka kwa kichaji katika utendaji EditProduct. Tuongeze kabla ya amri return:

const { product } = useLoaderData();

Sasa tuongeze kwenye kila lebo ya ingizo (input tag) sifa defaultValue yenye thamani zinazofaa kwa kila ingizo. Kwa mfano, ingizo la kwanza sasa litaonekana hivi:

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

Kwa ingizo zilizobaki thamani zitakuwa mtawalia 'product.cost' na 'product.amount'. Lakini kwa sasa data katika fomu bado hatuna.

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, unda utendaji loader kwenye edit.jsx kwa njia ya kurekebisha data ya mwanafunzi.

Ongeza kwenye safu children kipengee cha njia ya kurekebisha.

Ongeza kwa utendaji wako EditStudent msimbo unaohitajika katika somo.