Erstellen einer Route zur Datenbearbeitung in React Router

In der letzten Lektion haben wir ein Formular zur Bearbeitung in einer separaten React- Komponente EditProduct erstellt.

Schreiben wir nun die Loader-Funktion für die neue Route, und zwar direkt nach den Importen und vor der Funktion EditProduct. Sie wird genauso aussehen wie in product.jsx. Der Funktion werden URL-Parameter übergeben und anschließend werden wir das Produkt anhand seiner id abrufen:

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

Importieren wir getProduct aus forStorage.js:

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

Jetzt öffnen wir unsere main.jsx und importieren die von uns erstellte Komponente EditProduct und den Loader:

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

Anschließend fügen wir im Array children ein Route-Objekt für die Bearbeitung direkt nach der Produktroute hinzu:

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

Starten wir nun die Anwendung, erstellen wir ein Produkt, klicken wir darauf und dann auf den Bearbeiten-Button. Wir werden unser Formular sehen.

Einzige, wir müssen noch sicherstellen, dass in den Formularfeldern vor der Bearbeitung die aktuellen Daten geladen sind. Dafür importieren wir in edit.jsx den Hook useLoaderData:

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

Und wenden ihn an, um die Daten vom Loader in der Funktion EditProduct zu erhalten. Fügen wir ihn vor dem return-Befehl hinzu:

const { product } = useLoaderData();

Fügen wir nun in jedes Input-Tag das Attribut defaultValue mit den entsprechenden Werten für jede Eingabe hinzu. Zum Beispiel sieht die erste Eingabe jetzt so aus:

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

Für die beiden verbleibenden Eingaben lauten die Werte entsprechend 'product.cost' und 'product.amount'. Allerdings haben wir vorerst noch keine Daten im Formular.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Erstellen Sie unter Verwendung des Lehrmaterials die Funktion loader in edit.jsx für die Route zur Bearbeitung der Studentendaten.

Fügen Sie im Array children ein Objekt der Route für die Bearbeitung hinzu.

Fügen Sie für Ihre Funktion EditStudent den im Unterricht geforderten Code hinzu.