在 React 的 Swiper 滑块中动态附加幻灯片

问题描述

我正在 React 中创建一个新应用程序。我想对横幅使用 swiper 滑块。 横幅将从 API 中获取。一旦到达最后一张幻灯片，如何将幻灯片附加到 swiper。我正在使用 onReachEnd 函数来触发 api 调用。不确定如何动态附加幻灯片。

export const HeroSlider = () => {
    const [pageNumber,setCurrentPageNumber ] = useState(0)
    const { homeBannerData,isLoading,error } = useBannerData(pageNumber)
    
    var dataHomeBanner = []
    if (homeBannerData && homeBannerData.result) {
        dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)        
    }

    function fetchBannerData() {
        setCurrentPageNumber(pageNumber+1)
        if (homeBannerData && homeBannerData.result) {
            dataHomeBanner = dataHomeBanner.concat(homeBannerData.result.data)        
        }
    }

    return (
        /* Hero Banner Start */
        <section className="hero-slider">
            <Swiper
                    slidesPerView={1}
                    watchSlidesVisibility = {true}
                    navigation
                    onReachEnd={() => fetchBannerData()}
                    autoHeight = {true}
                    >
                    {dataHomeBanner && dataHomeBanner.map((slide,index)=>{
                        return (
                            <SwiperSlide key={index}>
                                <img src={slide.image alt={slide.title} className="w-100"/>
                                <Container>
                                    <div className="hero-slider-body d-flex align-items-end align-items-md-center">
                                        <Row>
                                            <Col md={12}>
                                                <div className="hero-slider-caption">
                                                    <h1>{slide.title}</h1>
                                                    <p>{slide.description}</p>
                                                </div>
                                            </Col>
                                        </Row>
                                    </div>
                                </Container>
                            </SwiperSlide>
                            )
                        })}
                </Swiper>
        </section> 
        /* Hero Banner End */  
    )
}

useBannerData 正在返回横幅数据。 现在，此代码正在添加新幻灯片并在使用新页码获取数据后替换旧幻灯片。我希望它附加在最后一张幻灯片的末尾，这样当用户到达最后一张幻灯片并点击下一张幻灯片时，它应该获取数据并将其附加到最后一张幻灯片的末尾。

TIA！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）