Tạo tuyến đường để chỉnh sửa dữ liệu trong React Router

Ở bài học trước, chúng ta đã tạo một biểu mẫu để chỉnh sửa trong một thành phần React riêng biệt EditProduct.

Bây giờ hãy viết hàm trình tải cho tuyến đường mới ngay sau lệnh nhập và trước hàm EditProduct. Nó sẽ giống như trong product.jsx. Vào hàm sẽ được truyền các tham số URL và sau đó chúng ta sẽ lấy sản phẩm theo id của nó:

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

Hãy nhập getProduct từ forStorage.js:

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

Và bây giờ chúng ta sẽ mở main.jsx và nhập thành phần mà chúng ta đã tạo EditProduct và trình tải:

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

Sau đó, thêm vào mảng children đối tượng tuyến đường cho chỉnh sửa ngay sau tuyến đường cho sản phẩm:

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

Bây giờ hãy chạy ứng dụng, tạo một sản phẩm, nhấp vào nó, sau đó nhấp vào nút chỉnh sửa và chúng ta sẽ thấy biểu mẫu của chúng ta.

Chỉ có điều, chúng ta cần làm thêm để dữ liệu hiện tại được tải sẵn trong các trường của biểu mẫu trước khi chỉnh sửa. Để làm điều này, chúng ta hãy nhập vào edit.jsx hook useLoaderData:

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

Và áp dụng nó để lấy dữ liệu từ trình tải trong hàm EditProduct. Hãy thêm nó trước lệnh return:

const { product } = useLoaderData();

Bây giờ hãy thêm vào mỗi thẻ input thuộc tính defaultValue với các giá trị tương ứng cho mỗi input. Ví dụ: input đầu tiên bây giờ sẽ trông như thế này:

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

Đối với hai input còn lại, các giá trị sẽ lần lượt là 'product.cost' và 'product.amount'. Tuy nhiên, hiện tại chúng ta chưa có dữ liệu trong biểu mẫu.

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập của các bài học trước. Sử dụng tài liệu của bài học, hãy tạo hàm loader trong edit.jsx cho tuyến đường chỉnh sửa dữ liệu sinh viên.

Thêm vào mảng children đối tượng tuyến đường để chỉnh sửa.

Thêm cho hàm EditStudent của bạn mã yêu cầu như trong bài học.