Datu rediģēšanas maršruta izveide React Router

Iepriekšējā nodarbībā mēs izveidojām formu rediģēšanai atsevišķā React komponentā EditProduct.

Tagad izveidosim ielādes funkciju jaunajam maršrutam uzreiz pēc importa un pirms funkcijas EditProduct. Tā būs tāda pati kā product.jsx. Funkcijai tiks nodoti URL parametri un pēc tam mēs iegūsim produktu pēc tā id:

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

Importēsim getProduct no forStorage.js:

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

Tagad atvērsim mūsu main.jsx un importēsim mūsu izveidoto komponentu EditProduct un ielādes funkciju:

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

Pēc tam pievienosim masīvā children maršruta objektu rediģēšanai uzreiz pēc produkta maršruta:

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

Tagad palaidīsim lietotni, izveidosim produktu, noklikšķināsim uz tā un pēc tam uz rediģēšanas pogas un redzēsim mūsu formu.

Vienīgais, mums vēl jāpanāk, lai formās pirms rediģēšanas tiek ielādēti pašreizējie dati. Lai to izdarītu, mēs importēsim edit.jsx hook useLoaderData:

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

Un izmantosim to, lai iegūtu datus no ielādes funkcijas funkcijā EditProduct. Pievienosim to pirms komandas return:

const { product } = useLoaderData();

Tagad pievienosim katram input tagam atribūtu defaultValue ar atbilstošajām vērtībām katram input. Piemēram, pirmais input tagad izskatīsies šādi:

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

Pārējiem diviem input vērtības būs attiecīgi 'product.cost' un 'product.amount'. Tomēr pagaidām datu formā mums nav.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, izveidojiet funkciju loader edit.jsx priekš studenta datu rediģēšanas maršruta.

Pievienojiet masīvā children objektu maršrutam rediģēšanai.

Pievienojiet savai funkcijai EditStudent nodarbībā prasīto kodu.