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）

，则可能会遇到该问题。

React-Slick Slider提供错误“未捕获的TypeError：无法将类作为函数调用”

3 个答案: