Actualización de datos con FormData en React Router

Tenemos una función updateProduct para actualizar los datos del producto en el almacenamiento. Ahora pasemos a los datos de nuestro formulario de edición.

Al enviar un formulario HTML, el navegador crea un objeto FormData con los datos y los envía en el cuerpo de la solicitud al servidor. Además, el valor de cada input se extrae en un objeto desde el atributo name (por eso eran necesarios para nosotros en el formulario, ¿recuerdan?). Nosotros ahora sabemos que React Router envía solicitudes no al servidor, sino al método action de nuestra ruta, en consecuencia, allí llegará el FormData. Trabajemos con esto.

Para empezar, abramos nuestro archivo edit.jsx e importemos updateProduct:

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

Luego escribiremos la función para action del objeto de ruta, como lo hicimos antes. Agreguémosla inmediatamente después de la función loader. Le pasaremos nuestro request y los parámetros URL:

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

De la solicitud obtendremos FormData, luego extraeremos los datos de él en forma de objeto, que contiene pares clave: valor y con updateProduct enviaremos estos datos al almacenamiento:

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

Solo queda ir a main.jsx y agregar la función action al objeto de la ruta de edición. Importemos action:

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

Y agreguémoslo al objeto de la ruta de edición:

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

Ahora inicie la aplicación, agregue un par de productos a la lista, luego haciendo clic en ellos complete el formulario y presione el botón de guardar. No olvide ir al panel de desarrollador en la sección localforage y actualizar el almacenamiento. Ahora en la sección keyvaluespairs podemos ver objetos en el array products con nuestros datos ingresados.

Tome la aplicación creada por usted en las tareas de la lección anterior. Usando los materiales de la lección, cree una función action para la ruta de edición de datos del estudiante, agréguela al objeto de la ruta de edición. Abra el panel de desarrollador y asegúrese de que al realizar cambios, los datos actualizados realmente se muestren en la pestaña localforage.