解决轮播图组件异步加载后第一张为最后一张图的问题

我使用的是react-slick插件，其实无论哪个插件好像都没有异常处理，你如果用本地资源去做加载的时候是不会出现异常的。但是当你使用如ajax去异步请求数据时就会出现问题。

原因：

当页面还没有接收ajax数据的时候，swiperList是空数组，轮播图的初始创建是通过空数组创建的，当ajax获取数据后，swiperList变成真正的数据项，再传给子组件时，才获取到新的数据，重新渲染新数据对应的图片，因为swiper的创建是根据空数组创建的才会出现上面的问题。

解决：

所以办法就是当list.length > 0 时候再去加载你的组件就行了，如下判断。

 {banners.length > 0 && (
        <Slider> ... </Slider>)
 }