اذهب إلى المحتوى
  • 0

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

محمود_سعداوي

السؤال

السلام عليكم.

الكود التالي يعمل بصفة جيدة

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);
    }

بينما لو حذفت 

console.log(box.clientWidth);

تظهر لي رسالة خطأ في عدم التعرف على "clientWidth"

Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth')
    at handleNextClick (Slider.jsx:30:1)

كيف يمكنني معالجة الخطأ.

شكرا.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

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

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.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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);
}

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...