Cập nhật dữ liệu theo tham số URL trong kho lưu trữ với React Router

Ở bài học trước, chúng ta đã thêm một tuyến đường và một trang biểu mẫu để chỉnh sửa dữ liệu. Việc còn lại của chúng ta là lưu dữ liệu đã được nhập vào biểu mẫu.

Đầu tiên, hãy thêm hàm cập nhật dữ liệu sản phẩm updateProduct vào forStorage.js. Chúng ta cần truyền vào đó id của sản phẩm và dữ liệu đã thay đổi:

export async function updateProduct(id, updates) {
	await someNetwork();
}

Tiếp theo, từ kho lưu trữ với khóa 'products', lấy ra danh sách sản phẩm và tìm sản phẩm chúng ta đang thay đổi theo id của nó. Trong trường hợp thất bại, hãy ném ra một lỗi:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('Không tìm thấy sản phẩm nào cho', id);				
}

Sau đó, chúng ta chỉ cần áp dụng các thay đổi vào sản phẩm đã tìm thấy và ghi đè danh sách đã cập nhật vào kho lưu trữ bằng hàm setProducts:

export async function updateProduct(id, updates) {
	await someNetwork();
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	if (!product) throw new Error('Không tìm thấy sản phẩm nào cho', id);
	Object.assign(product, updates);
	await setProducts(products);
	return product;
}

Lấy ứng dụng do bạn tạo trong các bài tập của những bài học trước. Sử dụng tài liệu bài học, thêm vào tệp forStorage.js hàm updateStudent để cập nhật dữ liệu sinh viên trong kho lưu trữ.