Khóa duy nhất thông qua id trong React

Trong đoạn mã trên, thuộc tính key chúng ta đã thêm số thứ tự của phần tử trong mảng. Trên thực tế, cách làm này là không tốt và chỉ nên sử dụng trong trường hợp bất khả kháng.

Vấn đề là khi sắp xếp mảng, các phần tử sẽ có các khóa khác và React không thể theo dõi chính xác mối liên hệ giữa các phần tử của mảng và các thẻ tương ứng.

Một cách làm tốt hơn là thêm cho mỗi sản phẩm một định danh duy nhất, định danh này sẽ được sử dụng làm khóa.

Hãy thêm vào mỗi sản phẩm trong mảng của chúng ta thuộc tính id với số thứ tự của sản phẩm chúng ta:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Bây giờ chúng ta sử dụng id này làm khóa:

function App() {
	const res = prods.map(function(item) {
		return <p key={item.id}>
			<span>{item.name}</span>:
			<span>{item.cost}</span>
		</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Hãy sửa đổi bài tập trước đó, thêm vào mảng id và sử dụng chúng làm giá trị cho thuộc tính key.