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. FireDac心得

    usesFireDAC.Phys.MySQL, FireDAC.Stan.Def, FireDAC.DApt, FireDAC.Comp.Client, FireDAC.Comp.UI, FireDA ...

  2. windows下安装python、环境设置、多python版本的切换、pyserial与多版本python安装、windows命令行下切换目录

    1.windows下安装python 官网下载安装即可 2.安装后的环境设置 我的电脑--属性--高级--设置path的地方添加python安装目录,如C:\Python27;C:\Python33 ...

  3. jfinal使用idea启动 访问报404 action not found

    公司一个项目,在eclipse里面启动正常,换到idea里面启动后,启动没有报错,但是访问的时候会提示404 action not found. 百度了很多种解决方法 都没有解决. 今天脑子一转,想到 ...

  4. 【SQL Server 学习系列】-- 获取字符串中出现某字符的次数及字符某次出现的下标

    ) = '1_BB_CC_DD_AA_EE_YY_WW_HH_GG' --// 1. 获取下划线在字符串中出现的次数 SELECT LEN(@Str) - LEN(REPLACE(@Str, '_', ...

  5. JavaScript 层

    代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--& ...

  6. BUPT复试专题—密码(2009)

    题目描述   输入 有多组输入,每组: 第一行:由26个小写字母组成的串以空格隔开,如 b a c e u f g h i j k l m n o p q r s t v w x y z d v y ...

  7. XStream 数组(List)输出结构

    <!-- 期望的DOM树 --> <Articles> <item> <Title>微信SDK初步结构</Title> <Descri ...

  8. 【linux驱动分析】之dm9000驱动分析(三):sk_buff结构分析

    [linux驱动分析]之dm9000驱动分析(一):dm9000原理及硬件分析 [linux驱动分析]之dm9000驱动分析(二):定义在板文件里的资源和设备以及几个宏 [linux驱动分析]之dm9 ...

  9. CodeForces 318D Ants

    题目链接 题意: 有n仅仅蚂蚁和m次询问 n仅仅蚂蚁初始所有位于起点(0,0)处.每4仅仅蚂蚁在同一格就会以该格为中心向上下左右四个方向爬一格 一仅仅向上,一仅仅向下,一仅仅向左.一仅仅向右 假设每一 ...

  10. 作为iOS程序员,最核心的60%能力有哪些?

    作为iOS程序员,最核心的60%能力有哪些?   一个合格的iOS程序员需要掌握多少核心技能?你和专业的开发工程师的差距有多大?你现在的水平能开发一个功能完整性能高效的iOS APP吗?一起来看看下面 ...