好客租房118-轮播图bug修复

 第一个 数据加载完成加载一个true

import React from "react";
import axios from "axios"
//留白
import { Carousel,Flex } from 'antd-mobile';
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

//导入样式
import "./index.css"


const navs=[{
    id:1,
    img:Nav1,
    title:"整租",
    path:"/home/list"
},{
    id:2,
    img:Nav2,
    title:"合租",
    path:"/home/list"
},{
    id:3,
    img:Nav3,
    title:"地图找房",
    path:"/home/list"
},{
    id:4,
    img:Nav4,
    title:"去出租",
    path:"/home/list"
}]
// 轮播图不会自动播放  数据返回过来的时候高度不够 数据加载前后数据的问题
class Index extends React.Component{
    state = {
        data: ['1', '2', '3'],
        imgHeight: 212,
        isSwiperLoding:false
      }
      componentDidMount() {
        // simulate img loading
        // this.getSwipers()
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
                isSwiperLoding:true
            });
          }, 100);
      }
      async getSwipers(){
          const res=await axios.get("http://localhost:8080/home/swiper")
          console.log("轮播如数据为:",res)
        //   this.setState({
        //       swiper:res.data.body
        //   })
      }
      //渲染轮播图的方法
      renderSwipers(){
        return   this.state.data.map(val => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))
      }
      //渲染导航菜单
      renderNavs(){
          return navs.map(item=>(
            <Flex.Item key={item.id} onClick={()=>{this.props.history.push(item.path)}}>
            <img src={item.img} alt=""/>
            <h2>{item.title}</h2>
            </Flex.Item>
          ))
      }
      render() {
        return (
            //留白 WingBlank
          <div className="index">
              <div className="swiper">
              {this.state.isSwiperLoding===true?(
                   <Carousel
                   //自动播放
                     autoplay={true}
                     infinite
                   //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                   //   afterChange={index => console.log('slide to', index)}
                   >
                    {this.renderSwipers()}
                   </Carousel>
                  
              ):""}
              </div>
           
               <Flex className="nav">
                    {this.renderNavs()}
                   </Flex>
           
       
          </div>
        );
      }
}

export default Index