无法在 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
     };

     ...

   }