Các vấn đề với ID mới trong React

Giả sử từ cơ sở dữ liệu, chúng ta nhận được mảng đối tượng sau:

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

Như bạn thấy, id được đánh số theo thứ tự. Tuy nhiên, chúng ta cần lưu ý rằng các số có thể có khoảng trống, ví dụ, sau 3 có thể ngay lập tức là 5 hoặc 6. Do đó, script phía client của chúng ta không thể biết id tiếp theo sẽ là gì (trong trường hợp của chúng ta, đó không nhất thiết phải là 4).

Các id mới được tạo bởi cơ sở dữ liệu của máy chủ. Điều này có thể gây ra một số vấn đề khi làm việc ở phía client. Bản chất như sau: hãy tưởng tượng rằng chúng ta đã thêm một phần tử mới vào mảng của mình thông qua một biểu mẫu. Tuy nhiên, chúng ta không thể chỉ đơn giản lấy và thêm dữ liệu từ biểu mẫu - bởi vì chúng ta không biết id của phần tử mới sẽ là gì!

Chúng ta sẽ cần gửi yêu cầu đến máy chủ, để nó cung cấp cho chúng ta id tiếp theo theo thứ tự, và chỉ sau đó mới thêm phần tử vào mảng đối tượng của chúng ta. Điều này sẽ gây ra độ trễ trong việc hiển thị dữ liệu trên màn hình: trong khi dữ liệu được gửi đến máy chủ, và cho đến khi máy chủ gửi chúng trở lại cho chúng ta - sẽ mất một khoảng thời gian.