Mise à jour des données avec FormData dans React Router

Nous avons une fonction updateProduct pour mettre à jour les données du produit dans le stockage. Passons maintenant aux données de notre formulaire d'édition.

Lors de la soumission d'un formulaire HTML, le navigateur crée un objet FormData avec les données et l'envoie dans le corps de la requête au serveur. De plus, la valeur de chaque champ est extraite dans l'objet à partir de l'attribut name (c'est pourquoi ils nous étaient nécessaires dans le formulaire, vous vous souvenez?). Nous savons maintenant que React Router envoie les requêtes non pas au serveur, mais à la méthode action de notre route, par conséquent, le FormData y parviendra également. Travaillons avec cela.

Pour commencer, ouvrons notre fichier edit.jsx et importons updateProduct :

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

Ensuite, nous écrirons la fonction pour action de l'objet de route, comme nous l'avons fait précédemment. Ajoutons-la immédiatement après la fonction loader. Nous lui transmettrons notre request et les paramètres d'URL :

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

De la requête, nous obtiendrons le FormData, puis nous en extrairons les données sous forme d'objet, contenant des paires clé: valeur et à l'aide de updateProduct, nous enverrons ces données dans le stockage :

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

Il ne reste plus qu'à aller dans main.jsx et ajouter la fonction action à l'objet de route d'édition. Importons action :

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

Et ajoutons-le à l'objet de route d'édition :

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

Lancez maintenant l'application, ajoutez quelques produits à la liste, puis en cliquant sur eux, remplissez le formulaire et appuyez sur le bouton de sauvegarde. N'oubliez pas d'aller dans le panneau du développeur dans la section localforage et d'actualiser le stockage. Maintenant, dans la section keyvaluespairs, nous pouvons voir les objets dans le tableau products avec nos données saisies.

Prenez l'application que vous avez créée dans les tâches de la leçon précédente. En utilisant le matériel de la leçon, créez la fonction action pour la route de mise à jour des données de l'étudiant, ajoutez-la à l'objet de route d'édition. Ouvrez le panneau du développeur et assurez-vous que lors des modifications, les données mises à jour s'affichent bien dans l'onglet localforage.