滑动旋转木马错误

Question

任何人都知道这个错误的可能原因？

Uncaught TypeError: Cannot read property 'add' of null 

我在使用带有React.js的滑动轮播。我将图像数组作为道具传入，并调用图像滑块组件中的滑动函数。这个组件在一个页面上工作正常，但在不同的页面上我一直看到这个错误，图像显示在滑块中，但我认为由于这个错误，其他事情在页面上突然出现，有什么想法？

下面是组件，图像为从父道具传递的主要代码：

import React from 'react'; 
import {Link} from 'react-router'; 
import _ from 'lodash'; 
import Carousel from '../../Util/Carousel'; 

const ResOpt = [{ 
    breakpoint: 768, 
    settings: { 
     slidesToShow: 3, 
     slidesToScroll: 3, 
     arrows: true, 
     dots: false 
    } 
    }, { 
    breakpoint: 600, 
    settings: { 
     slidesToShow: 1.5, 
     slidesToScroll: 1.5, 
     arrows: false, 
     dots: false, 
     infinite: false 
    } 
    } 
]; 

class ImagesCarousel extends React.Component { 
    constructor() { 
    super(); 
    this.carouselDidStart = false; 
    this.carousel = new Carousel({ 
     outerSelector: ".carousel-container", 
     innerSelector: ".images-container", 
     responsive: ResOpt, 
     infinite: false 
    }); 
    } 

    componentDidUpdate() { 
    if (!this.carouselDidStart && this.dataIsLoaded()) { 
     this.carousel.startCarousel(); 

    } 
    } 

    componentWillUnmount() { 
    if (this.carousel) { 
     this.carousel.destroy(); 
     this.carousel = null; 
    } 
    } 

    dataIsLoaded() { 
    return !_.isEmpty(this.props.images); 
    } 

    render() { 

    let images = this.props.images; 

    return (
     <div className="detail-images"> 

     <div className="carousel-container"> 
      <div className="images-container"> 
      { 
       (images || []).map((image, index) => { 
       return <div key={image.imageId} className="img-item"><img src={image.imageName} /></div> 
       }) 
      } 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

export default ImagesCarousel; 

然后下面是主要的旋转木马类：

import $ from 'jquery'; 
import slick from 'slick-carousel'; 


export default class Carousel { 
    constructor(options) { 
    this.carouselIsOn = false; 
    this.breakpoint = breakpoint; 
    this.innerSelector = options['innerSelector']; 
    this.outerSelector = options['outerSelector']; 
    this.slickOptions = { 
     infinite: options.infinite || true, 
     slidesToShow: options['slidesToShow'] || 3, 
     slidesToScroll: options['slidesToScroll'] || 3, 
     dots: true, 
     arrows: true, 
     appendArrows: options.appendArrows || `${this.outerSelector} .carousel-nav`, 
     appendDots: options.appendDots || `${this.outerSelector} .carousel-nav`, 
     responsive: options.responsive || DEFAULT_RESPONSIVE 
    }; 
    this.startCarousel = this.startCarousel.bind(this); 
    } 

    startCarousel() { 
    const carouselContainer = $(this.innerSelector); 
    carouselContainer.slick(this.slickOptions); 
    this.carouselIsOn = true; 

    carouselContainer.find('.slick-cloned').attr('data-reactid', null); 
    } 

    destroy() { 
    $(this.innerSelector).slick("unslick"); 
    } 


} 

Answer 1

这可能是结果初始化浮油两次 - 见other SO question。你可以检查你是否用init event两次运行init。

$('.your-slick-container').on('init', function(event, slick, direction){ 
    console.log('slick init'); 
});