Δημιουργία μιας Διαδρομής για Επεξεργασία Δεδομένων στο React Router

Στο προηγούμενο μάθημα δημιουργήσαμε μια φόρμα επεξεργασίας σε ένα ξεχωριστό React component EditProduct.

Ας γράψουμε τώρα μια συνάρτηση loader για τη νέα διαδρομή αμέσως μετά τις εισαγωγές και πριν από την EditProduct συνάρτηση. Θα είναι η ίδια όπως στο product.jsx. Η συνάρτηση θα λαμβάνει παραμέτρους URL και στη συνέχεια θα παίρνουμε το προϊόν από το id του:

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

Εισαγάγετε το getProduct από το forStorage.js:

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

Τώρα θα ανοίξουμε το main.jsx και θα εισάγουμε το component EditProduct που δημιουργήσαμε και το loader:

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

Στη συνέχεια προσθέτουμε το αντικείμενο της διαδρομής επεξεργασίας στον πίνακα children, αμέσως μετά τη διαδρομή προϊόντος:

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

Τώρα ας εκκινήσουμε την εφαρμογή, ας δημιουργήσουμε ένα προϊόν, ας κάνουμε κλικ πάνω του, μετά στο κουμπί επεξεργασίας και ας δούμε τη φόρμα μας.

Το μόνο που χρειάζεται να κάνουμε είναι να βεβαιωθούμε ότι τα τρέχοντα δεδομένα φορτώνονται στα πεδία της φόρμας πριν από την επεξεργασία. Για να γίνει αυτό, εισάγουμε το hook useLoaderData στο edit.jsx:

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

Και θα το χρησιμοποιήσουμε για να πάρουμε δεδομένα από το loader στη συνάρτηση EditProduct. Θα το προσθέσουμε πριν από την εντολή return:

const { product } = useLoaderData();

Τώρα ας προσθέσουμε το χαρακτηριστικό defaultValue σε κάθε ετικέτα input με τις αντίστοιχες τιμές για κάθε input. Για παράδειγμα, το πρώτο input θα μοιάζει τώρα με αυτό:

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

Για τα δύο εναπομείναντα inputs, οι τιμές θα είναι 'product.cost' και 'product.amount', αντίστοιχα. Ωστόσο, δεν έχουμε ακόμη δεδομένα στη φόρμα.

Πάρτε την εφαρμογή που δημιουργήσατε στα προηγούμενα μαθήματα. Χρησιμοποιώντας το υλικό του μαθήματος, δημιουργήστε μια συνάρτηση loader στο edit.jsx για τη διαδρομή επεξεργασίας δεδομένων μαθητή.

Προσθέστε το αντικείμενο διαδρομής στον πίνακα children για επεξεργασία.

Προσθέστε τον απαιτούμενο κώδικα του μαθήματος στη συνάρτηση EditStudent σας.