react-slick, slickNext fires automatically after re-render when invoked on previous render

Question

Below is my code, on dropdown item click, after this.slickNext() invoked, an update event will be fired and this class compoent will be re-rendered. But slickNext method seems to be carried over to the re-render without click, hence, automatically show the second slide in order.

Can I get some help on this please? Thank you.

class CategorySlider extends Component {
constructor(props) {
    super(props);
}

next() {
    this.slider.slickNext();
}
previous() {
    this.slider.slickPrev();
}
render() {
    const categorySlide = (slide,markNotRequired) =>
    (
        <Dropdown
            trigger={trigger}
            icon={null}
            >
            <Dropdown.Menu>
                <Dropdown.Item text="Not required" onClick={() => { this.next(); }}/>
                <Dropdown.Item text="Done" />
            </Dropdown.Menu>
            </Dropdown>
    );

    const settings = {
    prevArrow: <PrevArrow />,
    nextArrow: <NextArrow />,
    slidesToShow: 1,
    slidesToScroll: 1,
    easing: 'linear'
    };

    return (
        <div>
        <Slider ref={slider => (this.slider = slider)} {...settings}>
            {
            _.map(_.filter(_.values(this.props.slidesVM.slides), slide => slide.isRequired), (slide,markNotRequired) => categorySlide(slide, this.props.markNotRequired))
            }
        </Slider>
        </div >
    )}

}

score 0 · Answer 1 · answered Jul 20 '18 at 01:48

Did some research and digging through the code, turns out the prev and next method actually modify the component state, put an offset on state.currentSlide. So on component update, the offset still applies~~

Not sure how much you can do at this stage.

react-slick, slickNext fires automatically after re-render when invoked on previous render

1 Answers1