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

Question

我正在 React 中创建一个新应用程序。我想为横幅使用滑动滑块。横幅将从 API 中获取。一旦到达最后一张幻灯片，如何将幻灯片附加到滑动器。我正在使用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 正在返回横幅数据。现在，此代码正在添加新幻灯片并在使用新页码获取数据后替换旧幻灯片。我希望它附加在最后一张幻灯片的末尾，这样当用户到达最后一张幻灯片并单击下一张幻灯片时，它应该获取数据并将其附加到最后一张幻灯片的末尾。

蒂亚！

标签： reactjsswiperdynamic-contentswiper.js