ปัญหาเกี่ยวกับ ID ใหม่ใน React

สมมติว่าจากฐานข้อมูลเราได้รับอาเรย์ของอ็อบเจ็กต์ดังต่อไปนี้:

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

อย่างที่คุณเห็น id ถูกนับเรียงลำดับ อย่างไรก็ตาม เราควรคำนึงว่าตัวเลข อาจมีข้ามได้ ตัวอย่างเช่น หลังจากอันที่ 3 อาจจะเป็นอันที่ 5 หรือ 6 ทันที เพราะเหตุนี้ สคริปต์ฝั่งไคลเอ็นต์ของเราไม่สามารถ รู้ได้ว่า id ต่อไปจะเป็นอะไร (ใน กรณีของเราไม่จำเป็นต้องเป็น 4)

id ใหม่ถูกสร้างโดยฐานข้อมูลของเซิร์ฟเวอร์ สิ่งนี้อาจทำให้เกิดปัญหาบางอย่างเมื่อ ทำงานบนฝั่งไคลเอ็นต์ สาระสำคัญมีดังนี้: ลองนึกภาพว่า ด้วยแบบฟอร์มเราเพิ่มองค์ประกอบใหม่ ลงในอาเรย์ของเรา อย่างไรก็ตาม เราไม่สามารถเพียงแค่ นำข้อมูลจากแบบฟอร์มมาเพิ่มได้ - เพราะเรา ไม่รู้ว่า id ขององค์ประกอบใหม่จะเป็นอะไร!

เราจะต้องส่งคำขอไปยังเซิร์ฟเวอร์ เพื่อให้มันให้ id ถัดไปตามลำดับแก่เรา และหลังจากนั้นจึงเพิ่มองค์ประกอบลงในอาเรย์ ของอ็อบเจ็กต์ของเรา สิ่งนี้จะทำให้เกิดความล่าช้าในการแสดงผล ข้อมูลบนหน้าจอ: ในขณะที่ข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ ในขณะที่เซิร์ฟเวอร์ส่งข้อมูลกลับมาหาเรา - จะต้องใช้ เวลาบางส่วน