reactjs - react-slick, slickNext 在上一次渲染调用时在重新渲染后自动触发

Question

下面是我的代码，在单击下拉项时，调用 this.slickNext() 后，将触发更新事件，并且将重新渲染此类组件。但是 slickNext 方法似乎无需单击即可进行重新渲染，因此会自动按顺序显示第二张幻灯片。

请问我能得到一些帮助吗？谢谢你。

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 >
    )}

}

Answer 1

对代码进行了一些研究和挖掘，结果发现 prev 和 next 方法实际上修改了组件状态，在 state.currentSlide 上放置了一个偏移量。所以在组件更新时，偏移量仍然适用~~

不知道在这个阶段你能做多少。