Fetch下载

npm install whatwg-fetch -S

Fetch请求json数据

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

aaarticlea/png;base64,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" alt="" />

具体实现

创建一个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文件

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

react之fetch请求json数据的更多相关文章

  1. 关于使用Ajax请求json数据,@RequestMapping返回中文乱码的几种解决办法

    一.问题描述: 使用ajax请求json数据的时候,无论如何返回的响应编码都是ISO-8859-1类型,因为统一都是utf-8编码,导致出现返回结果中文乱码情况. $.ajax({ type:&quo ...

  2. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  3. bootstrap通过ajax请求JSON数据后填充到模态框

    1.   JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...

  4. React 使用 fetch 请求天气

    中国天气网(http://www.weather.com.cn)提供了查询天气的 API,通过传入城市 id, 可以获得当前城市的天气信息,API 相关信息如下: 规格  描述 主机地址 http:/ ...

  5. ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  6. Struts2 Action接收POST请求JSON数据及其实现解析

    一.认识JSON JSON是一种轻量级.基于文本.与语言无关的数据交换格式,可以用文本格式的形式来存储或表示结构化的数据. 二.POST请求与Content-Type: application/jso ...

  7. jQuery实例之ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  8. ajax请求json数据跨域问题(转)

    一.后台代理技术 由服务器端向跨域下的网站发出请求,再将请求结果返回给前端,成功避免同源策略的限制. 具体操作如下: 1.在localhost:81/a.html中,向同源下的某个代理程序发出请求 $ ...

  9. C++通过HTTP请求Get或Post方式请求Json数据(转)

    原文网址:https://www.cnblogs.com/shike8080/articles/6549339.html #pragma once#include <iostream>#i ...

随机推荐

  1. 在springboot项目中获取pom.xml中的信息

    最近做了一个新项目,用到了springboot.在搭建框架的过程中,需要读取pom.xml中version的值,本来想着是用自己用java解析xml来着.没想到maven提供了这么一个包,可以直接获取 ...

  2. 【C#】RGB,CMYK,HSB各种颜色表示的转换(转)

    [C#]RGB,CMYK,HSB各种颜色表示的转换   一.表示颜色的方式有很多种,如RGB,CMYK,HSB,Hex等等 1.RGB:这种表示颜色由三原色构成,通过红,绿,蓝三种颜色分量的不同,组合 ...

  3. three.js 源代码凝视(九)Math/Matrix4.js

    商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 -  本博客专注于 敏捷开发 ...

  4. React 组件开发注意事项

    0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...

  5. saltstack源码安装

    环境 centos6.3,python2.7.5. 1.install libzmq-master $ git clone git://github.com/zeromq/libzmq.git $ c ...

  6. saltstack安装配置(syndic)

    syndic是saltstack用来做集群部署的,一般结构如图: syndic是一个特殊的minion,syndic类继承于minion类,syndic可以看作一个代理,只做数据传递. CentOS上 ...

  7. eureka高可用注册中心

    Eureka高可用注册中心 两个配置文件: application-peer1.properties application-peer2.properties 都需要加上 eureka.client. ...

  8. Hadoop 0.20.2+Ubuntu13.04配置和WordCount測试

    事实上这篇博客写的有些晚了.之前做过一些总结后来学校的事给忘了,这几天想又一次拿来玩玩发现有的东西记不住了.翻博客发现居然没有.好吧,所以赶紧写一份留着自己用吧.这东西网上有非常多,只是也不是全然适用 ...

  9. 使用zxing编写的二维码生成解析工具:QRCoder

    zxing GitHub地址 QRCoder GitHub地址 TipDialog.java package com.wolf_pan; import java.util.Timer; import ...

  10. VK Cup 2016 - Round 1 (Div. 2 Edition) C. Bear and Forgotten Tree 3

    C. Bear and Forgotten Tree 3 time limit per test 2 seconds memory limit per test 256 megabytes input ...