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

Posted 2023-02-25

【中文标题】React-Slick Slider Giving Error “Uncaught TypeError: Cannot call a class as a function”

【英文标题】：React-Slick Slider Giving Error "Uncaught TypeError: Cannot call a class as a function"

【发布时间】：2018-11-27 05:43:44

【问题描述】：

我只在使用包“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;

【问题讨论】：

您是否尝试过删除“node_module”目录然后重新安装它们？我还有一些其他问题，通过删除目录并重新安装解决了

是的，我有，但遗憾的是它什么也没做：/

【参考方案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 />;

【讨论】：

你确定那是正确的语法吗？我在任何地方都使用这种语法，而且很好。但是，您的代码返回了错误“警告：函数作为 React 子级无效。如果您从渲染返回一个组件而不是 ，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。”

您使用了哪种方法。第一个或第二个

第一个我不能使用第二个我在我的生命周期事件中使用上下文 API。我只是把它们删掉了，因为它们与问题无关。

你能确保你像<Studio />一样正确渲染了Studio组件

是的，视图中的所有内容都可以正确呈现，但是当我添加 即使没有设置或 ref 时，它也会返回相同的错误。删除后一切正常。

【参考方案2】：

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

【参考方案3】：

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