在React中应用Swiper懒加载效果，更换数据源后图片显示未更新 bug

[shiiiiiiji]

React中利用Swiper实现轮播+懒加载

在实现轮播效果的时候，往往会用到一些库，例如比较强大的[Swiper](http://3.swiper.com.cn/)。但是如果要基于React实现的话，往往会第一时间想去找找是否有相应的组件库支持，例如antd的[Carousel组件](https://mobile.ant.design/components/carousel-cn/)，但是在使用过程中，还是会遇到各种各样的bug，这里暂时不展开。最终，采用基于swiper在react中实现轮播效果。

轮播

• componentDidMount后

if(this.indexSwiper){
    this.indexSwiper.destroy(true,true);
    this.indexSwiper = null;
}
this.indexSwiper = new Swiper('.banner-recommend', {
    loop: true,
    autoplay: 3000,
    speed: 800,
    autoplayDisableOnInteraction: false,
    pagination: '.banner-recommend .swiper-pagination',
    onInit: (swiper) => {
        if(this.state.bannerList.length > 1){
            $(".banner-recommend .swiper-pagination").show();
        }else{
            swiper.stopAutoplay();
            swiper.params.onlyExternal = true;
            $(".banner-recommend .swiper-pagination").hide();
        }
    }
});

• JSX

<section className="swiper-container banner-recommend">
    <div className="swiper-wrapper">
        {
            bannerList.map((banner) =>
                <section className="banner-item swiper-slide">
                    <img src={banner.pictureUrl} alt=""/>
                </section>
            )
        }
    </div>
    <div className="swiper-pagination"></div>
</section>

懒加载

根据Swiper文档，http://3.swiper.com.cn/api/Images/2015/0308/213.html，加上相应属性如下：

  lazyLoading: true

<section className="banner-item swiper-slide" >
  <section className="swiper-lazy" data-background={banner.pictureUrl}></section>
</section>

出现bug

我们知道React是数据驱动的，而懒加载效果除了依赖数据外，还依赖具体的触发条件的，例如首次出现在屏幕中，具体的实现方式一般都是设置一个data-src属性，当达到触发条件时，将元素的src属性赋值为data-src的值。但是在React中，如果修改状态，仅仅会修改data-src属性值，并不能修改能够真正决定显示的src属性的值，这样就会出现当修改了轮播的数据，页面上显示的轮播图片并没有改变的bug，但其实data-src的值已经更新了。

解决方案

在更新banner数据时，先将其置空，以达到想要的初始化效果。

this.setState({
    bannerList: {}, // 解决修改banner源与懒加载冲突bug
}, ()=>{
    that.setState({
        bannerList: getData.content || []
    }, ()=>{
        that.initBanner();
        // **此处隐藏一个bug**，具体说明见楼下
    });
});

[shiiiiiiji]

在实现上面效果之后，发现隐藏一个新bug，当切换banner数据源时，多banner可能只显示第一个。可能原因在于我手动将bannerList置为空数组后，执行initBanner会报错。因此在initBanner前，保证bannerList有值即可。

if(that.state.bannerList.length) that.initBanner();