Slick Carousel Error

Question

Quelqu'un connaît les causes possibles de cette erreur?

Uncaught TypeError: Cannot read property 'add' of null 

J'utilise un carrousel lisse avec React.js. Je passe dans le tableau d'images en tant que prop et appelle la fonction slick dans le composant curseur d'image. Ce composant fonctionne bien sur une page mais sur une autre page je continue à voir cette erreur, les images sont affichées dans le curseur mais je pense qu'à cause de cette erreur, d'autres choses se cassent sur la page, des idées?

Ci-dessous est le code principal du composant, les images sont transmises en tant que des accessoires de la société mère:

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; 

Et ci-dessous est la principale classe de carrousel:

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

Cela pourrait être le résultat d'initialiser slick deux fois - voir ce other SO question. Vous pouvez vérifier si vous exécutez init deux fois avec le init event.

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