滑動旋轉木馬錯誤

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