React Router'da FormData ile Veri Güncelleme

Depodaki bir ürünün verilerini güncellemek için updateProduct fonksiyonumuz var. Şimdi düzenleme formumuzdan gelen verilere geçelim.

Bir HTML formu gönderildiğinde, tarayıcı FormData nesnesini oluşturur ve verileri bir istek gövdesi olarak sunucuya gönderir. Üstelik, her inputun değeri name özniteliğinden (bu yüzden forma ihtiyacımız vardı, hatırlıyor musunuz?) nesneye çıkarılır. Artık biliyoruz ki React Router istekleri sunucuya değil, rotamızın action yöntemine gönderir, dolayısıyla FormData oraya gidecektir. Haydi bununla çalışalım.

Öncelikle edit.jsx dosyamızı açalım ve updateProduct'ı içe aktaralım:

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

Sonra, daha önce yaptığımız gibi, rota nesnesi için action fonksiyonunu yazacağız. Onu loader fonksiyonunun hemen ardına ekleyelim. Ona request'imizi ve URL parametrelerini ileteceğiz:

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

İstekten FormData'yı alacağız, ardından onu anahtar: değer çiftleri içeren bir nesneye çıkaracağız ve updateProduct kullanarak bu verileri depoya göndereceğiz:

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

Geriye kalan tek şey main.jsx dosyasına gidip action fonksiyonunu düzenleme rotasının nesnesine eklemek. action'ı içe aktaralım:

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

Ve onu düzenleme rotasının nesnesine ekleyelim:

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

Şimdi uygulamayı başlatın, listeye birkaç ürün ekleyin, ardından üzerlerine tıklayarak formu doldurun ve kaydet düğmesine basın. Geliştirici panelinde localforage bölümüne gidip depoyu yenilemeyi unutmayın. Artık products dizisindeki nesneleri, girdiğimiz verilerle keyvaluespairs bölümünde görebiliriz.

Önceki dersteki görevlerde oluşturduğunuz uygulamayı alın. Dersteki materyalleri kullanarak, bir öğrencinin verilerini düzenleme rotası için action fonksiyonunu oluşturun, onu düzenleme rotasının nesnesine ekleyin. Geliştirici paneline gidin ve değişiklikler yapıldığında güncellenmiş verilerin localforage sekmesinde gerçekten görüntülendiğinden emin olun.