Cập nhật dữ liệu với FormData trong React Router

Chúng ta có hàm updateProduct để cập nhật dữ liệu sản phẩm trong kho lưu trữ. Bây giờ hãy chuyển sang dữ liệu từ biểu mẫu chỉnh sửa của chúng ta.

Khi gửi biểu mẫu HTML, trình duyệt tạo ra một đối tượng FormData với dữ liệu và gửi nó trong thân yêu cầu tới máy chủ. Hơn nữa, giá trị của mỗi input được trích xuất vào đối tượng từ thuộc tính name (đó là lý do chúng ta cần chúng trong biểu mẫu, bạn có nhớ không?). Chúng ta bây giờ biết rằng React Router gửi yêu cầu không phải tới máy chủ, mà tới phương thức action của route của chúng ta, tương ứng, ở đó sẽ nhận được FormData. Hãy làm việc với điều này.

Để bắt đầu, hãy mở tệp của chúng ta edit.jsx và import updateProduct:

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

Sau đó chúng ta sẽ viết hàm cho action đối tượng route, như đã làm trước đây. Thêm nó ngay sau hàm loader. Chúng ta sẽ truyền request và các tham số URL cho nó:

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

Từ yêu cầu, chúng ta sẽ nhận được FormData, sau đó trích xuất dữ liệu từ nó dưới dạng một đối tượng, chứa các cặp khóa: giá trị và sử dụng updateProduct để gửi dữ liệu này vào kho lưu trữ:

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

Chỉ còn lại việc đi tới main.jsx và thêm hàm action vào đối tượng route chỉnh sửa. Import action:

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

Và thêm nó vào đối tượng route chỉnh sửa:

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

Bây giờ hãy chạy ứng dụng, thêm một vài sản phẩm vào danh sách, sau đó bằng cách nhấp vào chúng, hãy điền vào biểu mẫu và nhấn nút lưu. Đừng quên vào bảng điều khiển nhà phát triển trong phần localforage và làm mới kho lưu trữ. Bây giờ trong phần keyvaluespairs, chúng ta có thể thấy các đối tượng trong mảng products với dữ liệu đã nhập của chúng ta.

Lấy ứng dụng được tạo bởi bạn trong các nhiệm vụ của 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 action cho route chỉnh sửa dữ liệu sinh viên, thêm nó vào đối tượng route chỉnh sửa. Mở bảng điều khiển nhà phát triển và đảm bảo rằng khi thay đổi, dữ liệu đã cập nhật thực sự được hiển thị trên tab localforage.