react之fetch请求json数据

Fetch下载

     npm install whatwg-fetch -S

Fetch请求json数据

json文件要放在public内部才能被检索到

  

 具体实现

创建一个fetch.js组件

import React,{Component} from 'react'

import 'whatwg-fetch'

class Fetch extends Component{

    constructor(props){

      super(props)

      this.state={

         datas:[]

       }

      this.getData=this.getData.bind(this)

}

getData(){

     fetch('../client/data.json')

     .then(response=>response.json())

     .then(data=>{this.setState({datas:data.arr})})

     .catch(e=>{console.log("error")})

}

render(){

     const datas=this.state.datas;

     return (

        <div>

            <button onClick={this.getData.bind(this)}>我是</button>

           <ul>

           { datas.map((item,index)=>{

            return <li key={index}>{item.names}</li>

           })}

           </ul>

       </div>

      )

    }

 }

export default Fetch;

本地json文件

?

1 2 3 4 5 6

{ "arr":[   {"city":"hebei","names":"chenbin"},   {"city":"nanyang","names":"xuexue"},   {"city":"beijing","names":"dongge"} ]}