好客租房115-获取数据

1安装axios yarn add axios

2在index组件中引入axios

3在state中加入swiper数据

4进行数据处理

5在函数中调用方法

6渲染轮播图

import React from "react";
import axios from "axios"
//留白
import { Carousel } from 'antd-mobile';
import { Item } from "antd-mobile/lib/tab-bar";
class Index extends React.Component{
    state = {
        data: ['1', '2', '3'],
        imgHeight: 212,
        swiper:[]
      }
      componentDidMount() {
        // simulate img loading
        this.getSwipers()
        
      }
      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.swiper.map(item => (
            <a
              key={item.id}
              href="http://itcast.cn"
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={`https://localhost:8080${item.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });
                }}
              />
            </a>
          ))
      }
      render() {
        return (
            //留白 WingBlank
          <div className="index">
            <Carousel
            //自动播放
              autoplay={false}
              infinite
            //   beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            //   afterChange={index => console.log('slide to', index)}
            >
             {this.renderSwipers()}
            </Carousel>
          </div>
        );
      }
}
 
export default Index