TypeError：无法使用 Image-Slider 读取未定义的属性“classList”

Question

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

在网站上使用一段时间后，会出现以下错误，并且滑块停止工作或执行诸如以非常快的速度依次显示所有幻灯片的操作。我该怎么做才能解决这个问题？

未处理的运行时错误 TypeError：无法读取未定义的属性“classList”

我已经尝试了很多我在 StackOverflow 上找到的解决方案，但没有任何效果......我只是无法在我的代码中找到错误，如下所示：（/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 和 btn-navig 类，但只有 2 个 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] 有值。

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