无法读取react-slick中null的属性“”slideHandler“”

Question

我有一个组件，它使用两个滑块的组合(总共4个)。一个组合用于水平旋转木马，另一个用于垂直旋转木马。此决定基于屏幕大小。

当它在较小的设备上渲染时，它工作得很好，但在较大的屏幕上，它会渲染，但只要我单击移动幻灯片的按钮，它就会崩溃，并显示以下错误。

​

​

我正在使用react-slick进行旋转木马。

下面是组件代码：

class Carousel extends Component {
   constructor(props) {
    super(props);
    this.state = {
        imageSlider: null,
        contentSlider: null,
        isMobile: true
    };

    this.getHorizontalSlider = this.getHorizontalSlider.bind(this);
    this.getVerticalSlider = this.getVerticalSlider.bind(this);
}

componentDidMount() {

    const isMobile = window.screen.width > 768 ? false : true;

    this.setState({
        imageSlider: this.slider1,
        contentSlider: this.slider2,
        isMobile: isMobile
    });
}

getHorizontalSlider() {
    return (
        <div className={this.props.className}>
            <Slider
                asNavFor={this.state.contentSlider}
                ref={slider => (this.slider1 = slider)}
                className={styles.horizontalImageSlider}
                focusOnSelect={false}
                arrows={false}
                dots={true}
                autoplay={true}
                autoplaySpeed={7000}
            >
                {
                    data.map((item, index) => (
                        <div key={index}>
                            <img src={item.imageUrl} className={`${styles.carouselImage} img-fluid mx-auto`} alt="" />
                        </div>
                    ))
                }
            </Slider>
            <Slider
                asNavFor={this.state.imageSlider}
                ref={slider => (this.slider2 = slider)}
                focusOnSelect={false}
                arrows={false}
            >
                {
                    data.map((item, index, arr) => (
                        <div key={index} className='text-center text-secondary'>
                            <h2 className="text-primary fw-bold mb-4">{item.heading}</h2>
                            <p className='lead px-2'>{item.description}</p>
                        </div>
                    ))
                }
            </Slider>
        </div>
    )
}


getVerticalSlider() {
    return (
        <div className={`row ${this.props.className}`}>
            <div className="col-4">
                <Slider
                    asNavFor={this.state.contentSlider}
                    ref={slider => (this.slider1 = slider)}
                    vertical={true}
                    arrows={false}
                    slidesToScroll={1}
                    verticalSwiping={false}
                    focusOnSelect={false}
                    slidesToShow={1}
                >
                    {
                        data.map((item, index) => (
                            <div key={index}>
                                <img src={item.imageUrl} className={`${styles.carouselImage} img-fluid mx-auto`} alt="" />
                            </div>
                        ))
                    }
                </Slider>
            </div>

            <div className="col-8">
                <div className='d-flex justify-content-center align-items-center h-100'>
                    <Slider
                        className={styles.verticalContentSlider}
                        asNavFor={this.state.imageSlider}
                        ref={slider => (this.slider2 = slider)}
                        slidesToScroll={1}
                        slidesToShow={1}
                        swipeToSlide={true}
                        focusOnSelect={true}
                        vertical={true}
                        adaptiveHeight={true}
                        nextArrow={<CustomArrow />}
                        prevArrow={<CustomArrow />}
                    >
                        {
                            data.map((item, index, arr) => (
                                <div key={index}>
                                    {getSlideContent(item, index, arr)}
                                </div>
                            ))
                        }
                    </Slider>
                </div>
            </div>
        </div>
    )
}

render() {

    if (this.state.isMobile === true) {
        return this.getHorizontalSlider();
    }

    return this.getVerticalSlider();
}

}

我知道这不是最好的代码，但我想先让它工作，然后再重构它。感谢你阅读这篇文章，非常感谢。

Answer 1

看起来您的setState()将只执行一次，在组件挂载后使用移动默认设置。这意味着当您的组件重新渲染以显示垂直滑块时，imageSlider和contentSlider仍然指向移动的水平滑块。这将导致react-slick在尝试解析asNavFor设置时抛出错误。

避免这种情况的一种方法可能是在构造函数中设置默认的移动状态，而不是在componentDidMount中，这样只会呈现一组组件(水平或垂直)。

   constructor(props) {
     super(props);

     this.state = {
       imageSlider: null,
       contentSlider: null,
       isMobile: window.screen.width <= 768
     };

     ...

   }