Slick Carousel Error

Question

Jeder weiß mögliche Ursachen für diesen Fehler?

Uncaught TypeError: Cannot read property 'add' of null 

Ich verwende Slick Karussell mit React.js. Ich übergebe das Bilder-Array als Requisite und rufe die Slick-Funktion in der Bild-Slider-Komponente auf. Diese Komponente funktioniert gut auf einer Seite, aber auf einer anderen Seite sehe ich diesen Fehler, Bilder werden im Slider angezeigt, aber ich denke, wegen dieses Fehlers brechen andere Dinge auf der Seite, irgendwelche Ideen?

Unten ist der Haupt-Code für die Komponente, Bilder als Requisiten aus dem übergeordneten übergeben werden:

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; 

Und dann ist unterhalb der Hauptkarussell Klasse:

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

Dies ist das Ergebnis sein könnte der Initialisierung Slick zweimal - siehe other SO question. Sie können überprüfen, ob Sie init zweimal mit der init event ausführen.

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