reactjs - 无法在 react-slick 中读取 null 的属性 'slideHandler'

Question

我有一个组合使用两个 slider 的组件(总共 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() 只会在组件以移动默认设置安装后执行一次。这意味着当您的组件重新呈现以显示垂直 slider 时，imageSlider 和 contentSlider 仍然指向移动的水平 slider 。这会导致 react-slick 在尝试解析您的 asNavFor 设置时抛出错误。

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

   constructor(props) {
     super(props);

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

     ...

   }