Die Skepping van 'n Roete vir Data Wysiging in React Router

In die vorige les het ons 'n vorm vir wysiging in 'n aparte React komponent EditProduct geskep.

Laat ons nou die laaierfunksie skryf vir die nuwe roete direk na die invoer en voor die funksie EditProduct. Dit sal dieselfde wees as in product.jsx. In die funksie sal URL-parameters oorgedra word en daarna sal ons die produk volgens sy id kry:

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

Laat ons getProduct invoer uit forStorage.js:

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

En nou sal ons ons main.jsx oopmaak en die deur ons geskepte komponent EditProduct en die laaier invoer:

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

Voeg dan in die skikking children die roetevoorwerp vir wysiging in, direk na die roete vir die produk:

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

Laat ons nou die toepassing begin, 'n produk skep, daarop klik, en dan op die wysigingsknoppie en ons sal ons vormpie sien.

Die enigste ding is, ons moet ook maak dat die huidige data in die vormvelde gelaai word voor wysiging. Hiervoor sal ons in edit.jsx die haak useLoaderData invoer:

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

En pas dit toe om data uit die laaier te kry in die funksie EditProduct. Voeg dit in voor die opdrag return:

const { product } = useLoaderData();

Voeg nou in elke inset-tag die attribuut defaultValue by met die ooreenstemmende waardes vir elke inset. Byvoorbeeld, die eerste inset sal nou so lyk:

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

Vir die twee oorblywende insette sal die waardes onderskeidelik 'product.cost' en 'product.amount' wees. Maar vir eers is daar nog nie data in die vorm nie.

Neem die toepassing wat jy geskep het in die take vir die vorige lesse. Gebruik die materiaal van die les en skep die funksie loader in edit.jsx vir die roete om studentedata te wysig.

Voeg in die skikking children die voorwerp van die roete vir wysiging by.

Voeg vir jou funksie EditStudent die vereiste kode soos in die les by.