react与后台交互获取并渲染数据（适合初学者）一个完整的demo
已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西已经了解react框架的使用、webstrom已配置react的基本东西
提示：
因为这里不能直接访问到我的后台，所以这里用虚拟数据作为后台
安装json-server
首先你的电脑中需要安装nodejs，建议使用最新版本。然后全局安装json server.
npm install json-server -g
1
可以使用json-server -h 来查看是否安装成功
在src同级目录下创建mock文件夹，里面新建data.json 写入数据
{
"data": [
{
"title": "湘潭夜跑",
"author": "张三",
"date": "2018年9月20日"
},
{
"title": "爬岳麓山",
"author": "李四",
"date": "2018年9月30日"
},
{
"title": "湘潭夜跑",
"author": "张三",
"date": "2018年9月20日"
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
然后打开新的terminal输入
json-server mock/data.json -p 3003
1
反向代理
在package.json文件中添加下条语句
"proxy":"http://localhost:3003"
1
注意：这里需要重新运行（npm start）该项目package.json更改的数据才会生效
在src目录下新建一个testCorrespond文件夹里面新建两个js文件，分别为PostItem.js、PostList.js
PostItem.js
import React,{Component} from 'react';
class PostItem extends Component{
render() {
const { title,author,date} = this.props;
return (
<div>
<div>
{ title }
</div>
<div>
创建人：<span>{ author }</span>
</div>
<div>
创建时间：<span>{ date }</span>
</div>
</div>
);
}
}
export default PostItem;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
PostList.js
import React,{Component} from 'react';
import PostItem from './PostItem';
class PostList extends Component{
constructor(props){
super(props);
this.state = {
news:[
{
title:"大家一起来讨论React吧",
author:"张三",
date:"2017-09-01 10:00"
}
]
};
}
handle_click = ()=>{
let t = this;
fetch("/data", {method: 'GET'}).then(
function (res) {
console.log(res);
res.json().then(function (data) {
console.log(data);
t.setState({
news:data
});
}
)
});
};
render() {
return (
<div>
<button onClick={this.handle_click}>button</button>
<br/>
帖子列表：
{this.state.news.map((item,i) =>
<div key={i}>
<PostItem
title = {item.title}
author = {item.author}
date = {item.date}
/>
</div>
)}
</div>
);
}
}
export default PostList;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
最后别忘记修改根目录下的index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import PostList from "./testCorrespond/PostList"
// import OrdinaryActivityList from './component/OrdinaryActivityList/index';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<PostList />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ok
项目跑成功后的界面显示
点击button后
打开控制台可与查看请求信息和数据
点赞 6
收藏
分享
————————————————
版权声明：本文为CSDN博主「a little peanut」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dayexiaofan/article/details/83281156
下载地址:
React中如何解决调用调用一个接口依赖于另一个接口返回值的情况
React hook 中的数据获取 |
