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. iOS release版本去除NSLog打印信息

    因为NSLog的输出还是比较消耗系统资源的,而且输出的数据也可能会暴露出App里的保密数据,所以发布正式版时需要把这些输出全部屏蔽掉. 我们可以在发布版本前先把所有NSLog语句注释掉,等以后要调试时 ...

  2. android 获得屏幕宽度和高度

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  3. golang几种post请求方式

    get请求 get请求可以直接http.Get方法,非常简单. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 func httpGet() {     resp, err := h ...

  4. leetcode笔记:Contains Duplicate

    一. 题目描写叙述 Given an array of integers, find if the array contains any duplicates. Your function shoul ...

  5. 吃我一记咸鱼突刺——使用板载RTC定时开机

    前言 原创文章,转载引用务必注明链接.水平有限,欢迎指正. 2016年3月30日 Lemuntu(Base On Jessie) 3.10.37 原载于Lemaker论坛.汇总于此. 看ATC2603 ...

  6. 读书笔记-2java虚拟机的可达性算法与finalize方法

    JAVA通过可达性分析算法来确定堆中哪些对象是应该被回收的. 非常多人包含我曾经在不了解的时候总以为是通过引用计数器来推断某个对象是否应该被回收可是后来想了想包含查阅一些资料发现不是这种.由于假设採用 ...

  7. ArcGIS教程:分水岭

    摘要 确定栅格中一组像元之上的汇流区域. 使用方法 · 各个分水岭的值将取自输入栅格中源的值或者要素倾泻点数据.假设倾泻点为栅格数据集,则使用像元值.假设倾泻点为点要素数据集,则从指定的字段中获取值. ...

  8. 算法和流程控制 --《高性能JavaScript》

    总结: 1.for, while, do-while循环性能相当,并没有一种循环类型明显快于或满于其他类型. 2.避免使用for-in循环,除非要遍历一个属性数量未知的对象. 3.改善循环性能的最佳形 ...

  9. windows下使用F2PY编译fortran文件的问题

    在windo系统下F2PY不支持gcc+gfortran的组合,解决的办法: 1.安装mingw和msys,在msys环境下使用F2PY调用gcc+gfortran进行编译 2.放弃F2PY,直接gf ...

  10. word2vec学习 spark版

    参考资料: http://ir.dlut.edu.cn/NewsShow.aspx?ID=291 http://www.douban.com/note/298095260/ http://machin ...