React-Slick Slider Giving Error “Uncaught TypeError: Cannot call a class as a function”

Question

我只在使用包“react-slick”时遇到这个问题。前一天晚上我没有遇到这个问题，但是今天启动我的开发服务器时，它出现了这个错误。

我已经尝试重新安装我的 node_modules 无济于事。当我删除组件时，错误消失了。我在整个应用程序中都使用了这个包，而且所有东西都在同一天坏了！但是，应用程序的其他部分运行良好。

代码

import React, { Component } from 'react';
import { AppConsumer } from '../../../Context';
import styled from 'styled-components';
import Slider from 'react-slick';
import Slide from './Slide';

const SliderContainer = styled.div `
    width: 100%;
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
`;

const StudioContainer = () => <AppConsumer>{context => <StudioComponent context={context} />}</AppConsumer>

class StudioComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            slideIndex: 0
        }
    }

    // Triggers the slidershow to go a direction
    next = () => this.slider.slickNext();
    prev = () => this.slider.slickPrev();

    render(props) {
        const { slideIndex } = this.state;
        const { studioVids, questions } = this.props.context.state;
        const { addVideo, deleteVid } = this.props.context;

        // Settings for the Slider
        const settings = {
            dots: false,
            infinite: false,
            arrows: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            adaptiveHeight: true,
            swipe: false,
            beforeChange: (current, next) => this.setState({ slideIndex: next })
        };

        return(
            <SliderContainer>

                 <Slider ref={c => (this.slider = c)}  {...settings}>
                    {
                        questions.map((question, i) => (
                            <Slide key={`VideoSlide_${i}`} 
                            id={i} 
                            questionLength={questions.length} 
                            question={question} 
                            next={() => this.next()} 
                            prev={() => this.prev()} 
                            current={slideIndex}
                            addVid={addVideo}
                            deleteVid={deleteVid}
                            studioVids={studioVids}
                            />
                        ))
                    }     
                </Slider>

            </SliderContainer>
        );
    }
}

const Studio = () => StudioContainer(StudioComponent);

export default Studio;

Answer 1

您没有正确使用 HOC。在您的情况下，StudioContainer 具有 HOC 和功能组件的混合语法。让 StudioContainer 成为一个接受组件并作为功能组件返回的 HOC 是可行的。

const StudioContainer = (StudioComponent) => () => <AppConsumer>{context => <StudioComponent context={context} />}</AppConsumer>

class StudioComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            slideIndex: 0
        }
    }

    render(props) {
        const { slideIndex } = this.state;

        // Settings for the Slider
        const settings = {
            dots: false,
            infinite: false,
            arrows: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            adaptiveHeight: true,
            swipe: false,
            beforeChange: (current, next) => this.setState({ slideIndex: next })
        };

        return(
            <div>
                 <Slider ref={c => (this.slider = c)}  {...settings}>
                    <div><p>1</p></div>
                    <div><p>2</p></div>
                </Slider>
            </div>
        );
    }
}

const Studio = StudioContainer(StudioComponent);

export default Studio;

或者你可以简单地使用它

const StudioContainer = () => 
    <AppConsumer>
        {context => <StudioComponent context={context} />}
     </AppConsumer>


const Studio = () => <StudioContainer />;

Answer 2

我最终只是恢复到版本 (0.21.0)。 我还是不知道为什么新版本坏了。

Answer 3

在使用带有 react-slick 的Why-you-update npm 时，您可能会遇到这个问题（更多信息：https://github.com/maicki/why-did-you-update/issues/48）