Mengemaskini Data dengan FormData dalam React Router

Kami mempunyai fungsi updateProduct untuk mengemaskini data produk dalam storan. Sekarang mari kita beralih kepada data daripada borang pengeditan kami.

Apabila borang HTML dihantar, pelayar mencipta objek FormData dengan data dan menghantarnya dalam badan permintaan ke pelayan. Selain itu, nilai setiap input diekstrak ke dalam objek daripada atribut name (oleh itu mereka diperlukan dalam borang kami, ingat?). Kami sekarang tahu bahawa React Router menghantar permintaan bukan ke pelayan, tetapi ke kaedah action laluan kami, oleh itu, di situlah FormData akan pergi. Mari bekerja dengan ini.

Sebagai permulaan, buka fail kami edit.jsx dan import updateProduct:

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

Kemudian kami akan menulis fungsi untuk action objek laluan, seperti yang kami lakukan sebelum ini. Mari tambahkannya sejurus selepas fungsi loader. Kami akan menyampaikan request kami dan parameter URL kepadanya:

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

Daripada permintaan, kami akan mendapatkan FormData, kemudian mengekstrak datanya dalam bentuk objek, mengandungi pasangan kunci: nilai dan menggunakan updateProduct untuk menghantar data ini ke storan:

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

Hanya tinggal untuk pergi ke main.jsx dan tambah fungsi action ke dalam objek laluan pengeditan. Import action:

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

Dan tambahkannya ke dalam objek laluan pengeditan:

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

Jalankan aplikasi sekarang, tambahkan beberapa produk ke dalam senarai, kemudian dengan mengklik pada mereka isikan borang dan tekan tombol simpan. Jangan lupa untuk pergi ke panel pembangun dalam bahagian localforage dan muat semula storan. Sekarang dalam bahagian keyvaluespairs kita boleh melihat objek dalam array products dengan data yang kami masukkan.

Ambil aplikasi yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, cipta fungsi action untuk laluan mengemaskini data pelajar, tambahkannya ke dalam objek laluan pengeditan. Buka panel pembangun dan pastikan bahawa apabila perubahan dibuat, data yang dikemaskini benar-benar dipaparkan pada tab localforage.