Memperbarui Data dengan FormData di React Router

Kita memiliki fungsi updateProduct untuk memperbarui data produk di penyimpanan. Sekarang mari kita beralih ke data dari form edit kita.

Saat mengirimkan form HTML, browser membuat objek FormData dengan data dan mengirimkannya di body permintaan ke server. Selain itu, nilai setiap input diekstrak ke dalam objek dari atribut name (karena itulah mereka diperlukan dalam form, ingat?). Kita sekarang tahu bahwa React Router mengirimkan permintaan bukan ke server, tetapi ke metode action rute kita, karenanya, FormData akan sampai di sana. Mari kita bekerja dengan ini.

Pertama, buka file kita edit.jsx dan impor updateProduct:

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

Kemudian kita akan menulis fungsi untuk action objek rute, seperti yang kita lakukan sebelumnya. Tambahkan segera setelah fungsi loader. Kita akan meneruskan request dan parameter URL kita:

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

Dari permintaan kita akan mendapatkan FormData, kemudian mengekstrak datanya ke dalam objek, yang berisi pasangan kunci: nilai dan dengan updateProduct mengirim data ini ke penyimpanan:

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

Tinggal masuk ke main.jsx dan tambahkan fungsi action ke objek rute edit. Impor action:

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

Dan tambahkan ke objek rute edit:

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

Sekarang jalankan aplikasi, tambahkan beberapa produk ke daftar, kemudian dengan mengklik mereka isi form dan tekan tombol simpan. Jangan lupa buka panel pengembang di bagian localforage dan segarkan penyimpanan. Sekarang di bagian keyvaluespairs kita dapat melihat objek dalam array products dengan data yang telah kita masukkan.

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, buat fungsi action untuk rute edit data mahasiswa, tambahkan ke objek rute edit. Buka panel pengembang dan pastikan bahwa setelah perubahan, data yang diperbarui benar-benar ditampilkan di tab localforage.