前端学习(2310):数据请求和json-server

app.js

import React from 'react';import './App.css';
import  Home from './components/Home.js'
import World from "./components/World";
function App() {return (<div className="App">你好<World/></div>);
}export default App;

world.js

import React, {Component} from 'react';
import axios from 'axios'
class World extends Component {constructor(props) {super(props);this.state={arr:[]}}componentDidMount() {this.ajaxfun()}ajaxfun=()=>{axios.get("http://localhost:4000/arr").then((ok)=>{console.log(ok)this.setState({arr:ok.data})})}render() {return (<div>{this.state.arr.map((v, i) => {return <p key={i}>{v.name}</p>})}</div>);}
}export default World;

data.json

{"arr":[{"id":1,"name":"小明1"},{"id":2,"name":"小明2"},{"id":3,"name":"小明3"},{"id":4,"name":"小明4"}]
}

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对Linux课程内容的建议,Linux课程笔记 Day01 课程内容总结(示例代码)

系统安装&#xff1a;引导项简单介绍&#xff1a;在“boot:”提示后&#xff1a;直接回车(Enter)——图形界面安装模式linux text——字符界面安装模式linux askmethod——提示用户选择安装方法(例如&#xff1a;nfs、ftp、http远程安装)linux rescue——救援模式&#xff0c;…

前端学习(2311):react中处理跨域问题

proxy:{"/api":{target:"http://www.weather.com.cn/data/cityinfo/101320101.html",changeOrigin:true,"pathRewrite":{"^/api":"/"}}}

Dev Express Report 学习总结(五)在分组中使用聚集表达式AggregateExpression

聚集表达式AggregateExpression主要包括几种&#xff1a;Avg(),Count(),Exists(),Max(),Min(),Single()和Sum()。其中对于Sum()&#xff0c;在我看来主要有两种用法&#xff0c;一种是Group时的合计&#xff0c;另一种是整个页面某个列的值的合计。但是对于Count(),由于以前对D…

linux6.8安装图形桌面,图形/文本界面安装CentOS 6.8系统详解

2. anaconda的工作过程前面提到&#xff0c;使用anaconda安装CentOS系统有两种方式&#xff0c;默认使用的是图形界面(GUI)安装&#xff0c;要求主机内存至少有512MB内存。而使用基于文本配置接口(TUI)来安装CentOS则需要显示指定&#xff0c;指定方式可以是在菜单界面按ESC键&…

从零开始学JavaWeb

引言 记得上学时,有位导师说过一句很经典的话:"编程语言只是工具,最重要的是掌握思想。" 笔者一直主要从事.net领域的开发工作。随着工作阅历的丰富&#xff0c;越来越深刻的理解当年导师说的那句话的意义。 "他山之石,可以攻玉",相互借鉴,然后为我所用,无…

VS2010 C++下编译调试MongoDB源码 r2.2.2

编译下载mongodb-src-r2.2.2用VS2010打开mongodb-src-r2.2.2\src\mongo\db\db_10.sln编译mongod项目调试先创建数据库文件夹"D:\mongodb\db"设置调试参数--dbpathD:\mongodb\dbF5运行调试

linux如何记录测试时长,如何测试Linux命令运行时间?

如何测试Linux命令运行时间&#xff1f;良许在工作中&#xff0c;写过一个 Shell 脚本&#xff0c;这个脚本可以从 4 个 NTP 服务器轮流获取时间&#xff0c;然后将最可靠的时间设置为系统时间。因为我们对于时间的要求比较高&#xff0c;需要在短时间内就获取到正确的时间。所…

软件工程概论个人作业02(四则运算2)

1、设计思想&#xff1a; 在四则运算1的基础上&#xff0c;多加了几个要求&#xff0c;是否有乘除法可以通过不同的选择然随机生成符号的函数有时候生成两个数字对应加减&#xff0c;有时候生成四个数对应加减乘除&#xff1b;括号没有实现&#xff1b;数值范围通过一个函数实现…

linux的yum详解,Linux之YUM 详解

一、yum是什么yum Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理大量系统的更新问题二、yum 的运用格式及常用参数yum [option] "包名"有些记不住的包名 可以使用通配符* 来一次安装多个前端一直的软…

tableview直接滚动至最后一行

类似聊天界面&#xff0c;tableview应该直接显示在最后一行&#xff0c;并且不应该有滚动的出现。 在网上查了很久&#xff0c;直接滚动至最后一行很容易实现&#xff0c;有两种方法比较好。 1. 调用scrollToRowAtIndexPath方法 -(void) scrollBottom{if ([self.messageData co…

c语言两个字符串比较,将两个字符串s1和s2比较,如果s1s2,数组编程:将2个字符串s1和s2比较。若s1s2输出1;若s1=s2,输出0;若s1s2,输出-1(不能用strcmp函数)...

满意答案zxd8611032014.04.15采纳率&#xff1a;55% 等级&#xff1a;9已帮助&#xff1a;563人#include<iostream.h>#include<string.h>int min(int a,int b){return ((a<b)?a:b);}void main(){char a[1000],b[1000];int lena,lenb,i,t,res,flag0;cin>&…

在线高清大图发布

ImageBrowser 解决了任意大小的在线高清大图的快速发布与显示&#xff0c;支持tif、jpg、png、bmp等多种图片格式&#xff0c;能够快速更新索引、跨平台部署和支持二次开发&#xff0c;可以在任何网站下调用和显示。可广泛应用于摄影、车展、古玩拍卖、建筑工程等领域。 实例地…

前端学习(2324):angular初步使用

app.component.html <div style"text-align:center"><h1>welcome to {{title}}</h1><div style"color:#f00000">我是歌谣</div><div>{{name}}</div> </div>app.component.ts import { Component } from…

前端学习(2325):angular之数据修改

app.component.html <div style"text-align:center"><h1>welcome to {{title}}</h1><div style"color:#f00000">我是歌谣</div><div>{{name}}</div> </div>app.component.ts import { Component } from…