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. Idea配置Tomcat以及maven

    配置Tamcat Run-->Edit Configurations +-->如果列表里没有tomcat-->点击33 items more irrelevant继续寻找--> ...

  2. P3378 堆【模板】 洛谷

    https://www.luogu.org/problem/show?pid=3378 题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 ...

  3. 汉澳sinox通过ndis执行windows驱动程序

    汉澳sinox不仅能通过wine执行windows应用程序.还能通过ndis执行windows驱动程序 汉澳sinox使用 Windows NDIS 驱动程序 详细实现方法是用ndisgen把wind ...

  4. ubuntu uninstall postgres

    Steps that worked for me on Ubuntu 8.04.2 to remove postgres 8.3 List All Postgres related packages ...

  5. [转]java中的字符串相关知识整理

    字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...

  6. nginx配置初步

    nginx配置初步 1,切换至nginx目录,找到配置文件目录 cd /etc/nginx/conf.d 2,拷贝一份conf文件 sudo cp default.conf head.conf 3,进 ...

  7. [AngularJS + Unit Testing] Testing a component with requiring ngModel

    The component test: describe('The component test', () => { let component, $componentController, $ ...

  8. 机房收费系统(VB.NET)个人版总结

    重构版个人机房收费系统大概从暑假开学開始进行.花了不到一个半月的时间才完毕.以下对我在重构过程中的一写理解. 1.系统设计一个非常重要的目的就是重用.而要做到重用,低耦合是最有效的手段回想一下我们C/ ...

  9. JAVA设计模式之 原型模式【Prototype Pattern】

    一.概述: 使用原型实例指定创建对象的种类,而且通过拷贝这些原型创建新的对象. 简单的说就是对象的拷贝生成新的对象(对象的克隆),原型模式是一种对象创建型模式. 二.使用场景: 创建新的对象能够通过对 ...

  10. Effective C++ 条款四 确定对象被使用前已被初始化

    1.对于某些array不保证其内容被初始化,而vector(来自STL)却有此保证. 2.永远在使用对象前初始化.对于无任何成员的内置类型,必须手工完成.      int x = 0;      c ...