Slick Carousel Error

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