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

Posted 2023-02-25

【中文标题】react-slick, slickNext 在上一次渲染调用时在重新渲染后自动触发

【英文标题】：react-slick, slickNext fires automatically after re-render when invoked on previous render

【发布时间】：2018-06-29 01:44:16

【问题描述】：

下面是我的代码，在点击下拉项时，在 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 >
    )

【参考方案1】：

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

不确定在这个阶段你能做多少。