Datenaktualisierung mit FormData in React Router

Wir haben die Funktion updateProduct, um Produktdaten im Speicher zu aktualisieren. Kommen wir nun zu den Daten aus unserem Bearbeitungsformular.

Beim Absenden eines HTML-Formulars erstellt der Browser ein FormData-Objekt mit den Daten und sendet es im Request-Body an den Server. Und zwar wird der Wert jedes Inputs aus dem name-Attribut in das Objekt extrahiert (deshalb brauchten wir sie ja auch im Formular, erinnern Sie sich?). Wir wissen nun, dass React Router Anfragen nicht an den Server, sondern an die action-Methode unserer Route sendet, dementsprechend gelangt auch das FormData dorthin. Lassen Sie uns damit arbeiten.

Öffnen wir zunächst unsere Datei edit.jsx und importieren updateProduct:

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

Dann schreiben wir die Funktion für die action des Route-Objekts, wie wir es früher getan haben. Wir fügen sie direkt nach der loader-Funktion hinzu. Wir werden ihr unseren request und die URL-Parameter übergeben:

export async function action({ request, params }) {}

Aus der Anfrage holen wir uns das FormData, dann extrahieren wir die Daten darin in Form eines Objekts, das Schlüssel: Wert-Paare enthält, und mittels updateProduct senden wir diese Daten in den Speicher:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Bleibt nur noch, in die main.jsx zu gehen und die action-Funktion in das Objekt der Bearbeitungsroute hinzuzufügen. Wir importieren die action:

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

Und fügen sie dem Objekt der Bearbeitungsroute hinzu:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

Starten Sie nun die Anwendung, fügen Sie einige Produkte zur Liste hinzu, füllen Sie dann durch Klicken auf sie das Formular aus und drücken Sie auf die Speichern-Schaltfläche. Vergessen Sie nicht, in die Entwicklertools im Abschnitt localforage zu gehen und den Speicher zu aktualisieren. Jetzt sehen wir im Abschnitt keyvaluespairs die Objekte im Array products mit unseren eingegebenen Daten.

Nehmen Sie die Anwendung, die Sie in den Aufgaben der letzten Lektion erstellt haben. Nutzen Sie die Materialien der Lektion, um die Funktion action für die Route zur Bearbeitung von Studentendaten zu erstellen und fügen Sie sie dem Objekt der Bearbeitungsroute hinzu. Öffnen Sie die Entwicklertools und vergewissern Sie sich, dass bei Änderungen die aktualisierten Daten tatsächlich auf dem Reiter localforage angezeigt werden.