TypeError: Cannot read property 'classList' of undefined with Image-Slider

Question

我目前在一个网站上工作，我在其中使用 Strapi 作为 CMS，并在其中使用 Next.js(React)前端。该站点还有一个图像滑块，其中显然包含图像、标题和说明。

在网站上运行一段时间后，出现以下错误，滑块停止工作或执行诸如一张接一张快速显示所有幻灯片之类的操作。我该怎么做才能解决这个问题？

未处理的运行时错误类型错误：无法读取未定义的属性 'classList'

我已经尝试了很多在 Whosebug 上找到的解决方案，但没有任何效果...我只是无法在我的代码中找到错误，错误如下：（/components/image-slider 文件）

    import ...
const Slider = ({...}) => {

 if (typeof window !== 'undefined') {
    var slides = document.querySelectorAll('.slide');
    var btns = document.querySelectorAll('.btn-navig');
    let currentSlide = 1;
    
    // Javascript for image slider manual navigation
    var manualNav = function(manual){
        slides.forEach((slide) => {
        slide.classList.remove('active');
    
        btns.forEach((btn) => {
            btn.classList.remove('active');
        });
        });
    
        slides[manual].classList.add('active');
        btns[manual].classList.add('active');
    }
    
        btns.forEach((btn, i) => {
        btn.addEventListener("click", () => {
            manualNav(i);
            currentSlide = i;
        });
        });
    
        // // Javascript for image slider autoplay navigation
        var repeat = function(activeClass){
        let active = document.getElementsByClassName('active');
        let i = 1;
    
        var repeater = () => {
            setTimeout(function(){
            [...active].forEach((activeSlide) => {
                activeSlide.classList.remove('active');
            });
    
            slides[i].classList.add('active');
            btns[i].classList.add('active');
            i++;
    
            if(slides.length == i){
            i = 0;
            }
            if(i >= slides.length){
            return;
            }
            repeater();
        }, 10000);
        }
        repeater();
        }
        repeat();
    }

    if (error) {
        return <div>An error occured: {error.message}</div>;
    }
    return (
        <div className="img-slider">
            <div className="slide active">
                <div className="info">
                   // content 
                </div>
            </div>
            <div className="slide">
                <div className="info">
                // content 
                </div>
            </div>
            // further slides
        
            <div className="navigation">
                <div className="btn-navig active"></div>
                <div className="btn-navig"></div>
                <div className="btn-navig"></div>
            </div>
        
        </div>
    );
    };

// axios request ...

export default Slider;

希望有人能帮我解决上面提到的问题。非常感谢！

Answer 1

你的代码中的第一个缺陷就是这个

var manualNav = function(manual){
    slides.forEach((slide) => {
    slide.classList.remove('active');

    btns.forEach((btn) => {
        btn.classList.remove('active');
    });
    });

    slides[manual].classList.add('active');
    btns[manual].classList.add('active');
}

在这里，slides[] 的每一个新的 slide，都会启动一个新的 btns[] 循环。

    btns.forEach((btn) => {
        btn.classList.remove('active');
    });

但这只是浪费了不必要的处理时间。这样做：

var manualNav = function(manual){
    slides.forEach((slide) => {
        slide.classList.remove('active');
    });

    btns.forEach((btn) => {
        btn.classList.remove('active');
    });
    
    slides[manual].classList.add('active');
    btns[manual].classList.add('active');
}

你的实际问题是这样的。

您有 3 个 div class btn-navig 但只有 2 个 class slide。但是在你的 repeater() 中，每个新循环都会将 i 增加 1。

 slides[i].classList.add('active');
 btns[i].classList.add('active');
 i++;

在第二次迭代中，您会遇到以下情况：

 slides[2].classList.add('active');  // undefined
 btns[2].classList.add('active'); // value

没有 slides[2] 因为只有 slides[0] 和 slides[1] 有值。

您必须重新考虑您的索引方法。

TypeError: Cannot read property 'classList' of undefined with Image-Slider

TypeError: Cannot read property 'classList' of undefined with Image-Slider

javascript

runtime-error

reactjs

strapi

next.js