مشكل في التعامل مع المصفوفات عند إستعمال الخطافات في react js

المشكلة في الكود هي استخدام دالة splice بشكل غير صحيح، حيث أن الدالة تأخذ مؤشر البداية وعدد العناصر التي يجب حذفها من المصفوفة، ولكن في هذه الحالة يتم استخدام e.target.classList.contains('selected') كمؤشر بداية لحذف العنصر المختار، وهذا خاطئ لأن e.target.classList.contains('selected') ليست مؤشرًا بل قيمة بوليانية.

بالإضافة إلى ذلك، يتم إضافة المصفوفة seats دومًا دون حذف الكراسي عند الضغط على كرسي مختار، لذلك ستكون طول المصفوفة متزايدًا بشكل لا نهائي عند النقر على الكراسي المختلفة.

أما عند الضغط على كرسي محجوز فإنه يتم حذف العنصر بشكل صحيح باستخدام splice ولكن القيمة التي يتم إرجاعها لم تعدم الكرسي المحذوف وهذا يؤدي إلى إعادة تعيين طول المصفوفة إلى الصفر.

لحل هذه المشكلة يجب استخدام seats.filter() بدلاً من splice() لإزالة العنصر المختار وإعادة القيم الجديدة للمصفوفة seats. كما يجب إصلاح الجزء المسؤول عن إضافة الكرسي المختار بحيث يتم حذف الكرسي من المصفوفة إذا كان قد تم اختياره مسبقًا.

والأفضل أن يكون الكود  على النحو التالي فهو مختصر:

const [seats, setSeats] = useState([]);

const handleSeats = (e) => {
  e.target.classList.toggle('selected');
  const selectedSeats = document.querySelectorAll('.selected:not(.occupied)');
  const selectedSeatsIds = Array.from(selectedSeats).map(seat => seat.id);
  setSeats(selectedSeatsIds);
}

وهنا، تم استخدام querySelectorAll للعثور على كل العناصر التي تحتوي على الكلاس .selected وليس العناصر التي يتم احتلالها، ثم تم استخدام map لإرجاع مصفوفة الهويات الخاصة بالعناصر المحددة فقط. ثم تم تعيين هذه المصفوفة إلى حالة seats.