React + antd 的 轮播图不自动轮播

发现问题 : 项目中 使用 React 结合 antd 实现 轮播图 , 按照 antd 官网的说法 将 autoplay={false} 属性 改为 autoplay 依然没有解决问题 ;

分析 问题 : 轮播图的图片是 后台 返回的 , 发送 的axios 请求是异步请求 , 首先要保证拿到 图片 , 才能让图片实现 轮播

解决问题 : 有两种方式 ,

方法一 是 给 轮播图 的 自动轮播 加 一个定时器 ; ( 这是 antd 官网 推荐 的写法)

componentDidMount() {
   // simulate img loading
   setTimeout(() => {
     this.setState({
       data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
     });
   }, 100);
 }

方法二 : 是 加 一个判断 , 只有 拿到了图片 ,我 才 让你自动轮播 ;

// 定义轮播图组件
class Banner extends Component {
   state = {
       data: [],
       bIsloaded: false
   }
   componentDidMount() {
       this.fnGetimg()
   }
   fnGetimg = async () => {
       let oRes = await this.axios.get('/home/swiper');
       console.log(oRes);
       this.setState({
           data: oRes.data.body,
           bIsloaded: true
       })
   }
   render() {
       let { data, bIsloaded } = this.state
       return (
           // .banner 类名的样式是为了阻止 谷歌浏览器的 默认行为报错 touch-action: none;
           <div className="banner">
               {
                   // 请求图片是异步操作 ,  要先判断 图片存在 才能实现轮播
                   bIsloaded && <Carousel
                       autoplay
                       infinite
                   >
                       {data.map(val => (
                           <a
                               key={val.id}
                               href="http://www.alipay.com"
                               style={{ display: 'inline-block', width: '100%', height: '10.6rem' }}
                           >
                               <img
                                   src={BASE_URL + val.imgSrc}
                                   alt=""
                                   style={{ width: '100%', verticalAlign: 'top' }}
                               />
                           </a>
                       ))}
                   </Carousel>
               }

           </div>


       )
   }
}