輪播錯誤

Question

有人知道此錯誤的可能原因嗎？

Uncaught TypeError: Cannot read property 'add' of null

我在React.js中使用光滑的輪播。 我將圖像數組作為道具傳遞，並在圖像滑塊組件中調用slick函數。 該組件在一頁上可以正常工作，但在另一頁上我仍然看到此錯誤，滑塊中顯示圖像，但我認為由於此錯誤，其他內容在頁面上中斷了，有什么想法嗎？

以下是該組件的主要代碼，圖像作為道具從父級傳遞：

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

這可能是初始化兩次平滑操作的結果-請參見另一個SO問題 。 您可以使用init事件檢查兩次是否運行了init 。

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