رسالة خطأ ناجمة عن عدم كتابة ()console.log

عدل الكود للشكل التالي :

const handlePrevClick = () => {
  const box = carrouselRef.current;
  let width = box.clientWidth;
  box.scrollLeft = box.scrollLeft - width;
};

const handleNextClick = () => {
  const box = carrouselRef.current;
  let width = box.clientWidth;
  box.scrollLeft = box.scrollLeft + width;
};

بحيث تعرف الـ box داخل كل وظيفة بدلاً م ان تعرفه خارج الوظائف.

وسبب المشكلة انك تعرف الـ box والذي هو عبارة عن useRef قبل ان تقوم بإسناد الـ useRef للعنصر الذي تريد التحكم به وفي هذه الحالة تكون قيمته undefined وهو يعمل عند اضافة الـ console.log بسبب خواص react والتي تسمح للتطبيع بالتحديث بدون اعادة تحميل الصفحة بالكامل.

بينما في الشكل الثاني تقوم بتعرفي الـ box بعد ان تم اسناد الـ useRef.

يبدو ان هنالك عنصر ما ناقص في مشكلتك،

جرب الكود التالي :

const handlePrevClick = () => {
  let width = box.clientWidth
  box.scrollLeft = box.scrollLeft - width
  // console.log(box.clientWidth);
}

const handleNextClick = () => {
  let width = box.clientWidth
  box.scrollLeft = box.scrollLeft + width
  //console.log(box.clientWidth);
}

في حال لم يعم قم بمشاركة ملفات المشروع حتى استطيع تجريبه.

بتاريخ 1 دقيقة مضت قال عمر قره محمد:

يبدو ان هنالك عنصر ما ناقص في مشكلتك،

جرب الكود التالي :

const handlePrevClick = () => {
  let width = box.clientWidth
  box.scrollLeft = box.scrollLeft - width
  // console.log(box.clientWidth);
}

const handleNextClick = () => {
  let width = box.clientWidth
  box.scrollLeft = box.scrollLeft + width
  //console.log(box.clientWidth);
}

في حال لم يعم قم بمشاركة ملفات المشروع حتى استطيع تجريبه.

تفضل

src.zip