react的网络请求数据 get 请求实现方法【转】

---

一、首页我直接把请求过来的参数直接放在了生命周期函数里面

下面是请求到的数据：

二、把数据遍历到页面上，需要设定一个变量banners: [’’] 用来接收请求的数据，渲染到页面上：

 constructor(){
    super();
    this.state = {
        banners: ['']
    }
}
 componentDidMount(){
    fetch("http://iwenwiki.com/api/newworld/strategy.php")
    .then(res => res.json())
    .then(data => {
        console.log(data)
        //把数据赋值给 banners 然后渲染在页面上 
        this.setState({
            banners:data.europe.list
        })
    })
}

           {
               this.state.banners.map((element,index) =>{
                   return(
                       <ul key = {index}>
                           <h3>{element.desc}</h3>
                            <h3>{element.time}</h3>
                       </ul>
                   )
               })
           }

三、完整代码

提醒以下这里的接口不存在跨域问题，所以直接就请求数据了。
下面是完整的代码：

import React from "react"

export default class Web_request extends React.Component{

    constructor(){
        super();
        this.state = {
            banners: ['']
        }
    }

    // get请求
    componentDidMount(){
        fetch("http://iwenwiki.com/api/newworld/strategy.php")
        .then(res => res.json())
        .then(data => {
            console.log(data)
            this.setState({
                banners:data.europe.list
            })
        })
    }


    render(){
        return(
            <div>
                <hr/>
                <h1>网络请求数据</h1>
               {
                   this.state.banners.map((element,index) =>{
                       return(
                           <ul key = {index}>
                               <h3>{element.desc}</h3>
                                <h3>{element.time}</h3>
                           </ul>
                       )
                   })
               }
            </div>
        )
    }
}