Crearea unei rute pentru editarea datelor în React Router

În lecția precedentă am creat un formular pentru editare într-o componentă React separată EditProduct.

Haideți acum să scriem funcția de încărcare pentru noua rută imediat după importuri și înainte de funcția EditProduct. Ea va fi la fel ca în product.jsx. În funcție vor fi transmiși parametrii URL și apoi vom prelua produsul după id-ul său:

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

Importăm getProduct din forStorage.js:

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

Și acum vom deschide main.jsx-ul nostru și vom importa componenta creată de noi EditProduct și funcția de încărcare:

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

Apoi adăugăm în tabloul children obiectul rutei pentru editare imediat după ruta pentru produs:

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

Acum pornim aplicația, creăm un produs, facem clic pe el, apoi pe butonul de editare și vom vedea formularul nostru.

Singurul lucru, mai trebuie să facem așa, ca în câmpurile formularului înainte de editare să fie încărcate datele curente. Pentru asta importăm în edit.jsx hook-ul useLoaderData:

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

Și îl aplicăm pentru a obține date din funcția de încărcare în funcția EditProduct. Adăugăm înainte de comanda return:

const { product } = useLoaderData();

Acum adăugăm în fiecare tag input atributul defaultValue cu valorile corespunzătoare pentru fiecare input. De exemplu, primul input acum va arăta așa:

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

Pentru celelalte două inputuri valorile vor fi respectiv 'product.cost' și 'product.amount'. Adevărat, deocamdată date în formular nu avem.

Luați aplicația, creată de dumneavoastră în sarcinile din lecțiile trecute. Folosind materialele lecției, creați funcția loader în edit.jsx pentru ruta de editare a datelor studentului.

Adăugați în tabloul children obiectul rutei pentru editare.

Adăugați pentru funcția dumneavoastră EditStudent codul necesar indicat în lecție.