Mencipta Laluan untuk Mengedit Data dalam React Router

Dalam pelajaran lepas, kami mencipta borang untuk pengeditan dalam komponen React berasingan EditProduct.

Sekarang mari kita tulis fungsi pemuat untuk laluan baru sejurus selepas import dan sebelum fungsi EditProduct. Ia akan sama seperti dalam product.jsx. Parameter URL akan dipindahkan ke dalam fungsi dan kemudian kami akan mendapatkan produk mengikut id-nya:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Import getProduct dari forStorage.js:

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

Sekarang kami akan buka main.jsx dan import komponen EditProduct yang kami cipta dan pemuat:

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

Kemudian tambahkan dalam tatasusunan children objek laluan untuk pengeditan sejurus selepas laluan untuk produk:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
	{
		path: 'products/:productId/edit',
		element: <EditProduct />,
		loader: editProductLoader,
	},
],

Sekarang jalankan aplikasi, cipta produk, klik padanya, kemudian pada tombol pengeditan dan kita akan lihat borang kami.

Satu-satunya perkara, kami juga perlu memastikan bahawa data semasa dimuatkan dalam medan borang sebelum pengeditan. Untuk ini, kami import dalam edit.jsx hook useLoaderData:

import { Form, useLoaderData } from 'react-router-dom';

Dan gunakannya untuk mendapatkan data dari pemuat dalam fungsi EditProduct. Tambahkannya sebelum perintah return:

const { product } = useLoaderData();

Sekarang tambahkan dalam setiap tag input atribut defaultValue dengan nilai yang sepadan untuk setiap input. Sebagai contoh, input pertama kini akan kelihatan seperti ini:

<input
	placeholder="name"
	type="text"
	name="name"
	defaultValue={product.name}
/>

Untuk dua input yang tinggal, nilai akan masing-masing menjadi 'product.cost' dan 'product.amount'. Walaubagaimanapun, buat masa ini data dalam borang kami masih tiada.

Ambil aplikasi yang anda cipta dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, cipta fungsi loader dalam edit.jsx untuk laluan mengedit data pelajar.

Tambahkan dalam tatasusunan children objek laluan untuk pengeditan.

Tambahkan untuk fungsi EditStudent anda kod yang diperlukan dalam pelajaran.