React.js集成axios

网络数据传输一般推荐使用axios

1
yarn add axios

在react工程里,引入axios

1
import axios from 'axios';

先用antd创建一个Table表格,Table标签有两个属性,columns是表头,dataSource是数据

1
<Table columns={columns} dataSource={data}/>

columnsdata我们在state里面定义,state简单来讲是react特有的一个存储数据的地方,state写在constructor里。
补充说明一点,constructor是ES6中类的一个默认方法,一个类必定有一个constructor方法,即使不显示定义,生成对象时也会被默认添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
constructor(props) {
super(props);
//状态值
this.state = {
columns: [{ //定义姓名、性别两列
title: '姓名',
dataIndex: 'name',
}, {
title: '性别',
dataIndex: 'gender',
}],

data: [] //先空着
}
}

(1)读取网络数据

1
2
3
4
<?php
header("Access-Control-Allow-Origin: *");
echo '[{"key": "1", "name": "Joe.Ye", "gender": "男"}, {"key": "2", "name": "AppBlog.CN", "gender": "男"}]';
?>
1
<Button onClick={this.readData}>测试数据</Button>
1
2
3
4
5
6
7
8
9
readData() {
axios.get('http://www.yezhou.cc/api/data.php')
.then(res => {
console.log(res); //先输出到控制台看一下
})
.catch(error => {
console.log(error);
});
}

(2)读取数据显示到表格中

1
<Button type="primary" onClick={this.bindData.bind(this)}>读取表格数据</Button>
1
2
3
4
5
6
7
8
9
10
11
bindData() {
axios.get('http://www.yezhou.cc/api/data.php')
.then(res => {
this.setState({
data: res.data
})
})
.catch(error => {
console.log(error);
});
}

注意Button按钮绑定函数要加上bind(this),因为在ES6中React是不会自动绑定this的,不加的话会报错'setState' undefined

完整代码

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
50
51
52
53
54
55
56
57
58
59
60
61
import React from 'react';
import { Button, Icon, Table, Row, Col } from 'antd';
import axios from 'axios';

class AxiosTest extends React.Component {
constructor(props) {
super(props);
//状态值
this.state = {
columns: [{ //定义姓名、性别两列
title: '姓名',
dataIndex: 'name',
}, {
title: '性别',
dataIndex: 'gender',
}],

data: [] //先空着
}
}

readData() {
axios.get('http://www.yezhou.cc/api/data.php')
.then(res => {
console.log(res); //先输出到控制台看一下
})
.catch(error => {
console.log(error);
});
}

bindData() {
axios.get('http://www.yezhou.cc/api/data.php')
.then(res => {
this.setState({
data: res.data
})
})
.catch(error => {
console.log(error);
});
}

render() {
var data = this.state.data;
var columns = this.state.columns;
return (
<div className="App">
<Row type="flex" justify="center">
<Button onClick={this.readData}>测试数据</Button>
<Button type="primary" onClick={this.bindData.bind(this)}>读取表格数据</Button>
</Row>
<div>
<Table columns={columns} dataSource={data}/>
</div>
</div>
);
}
}

export default AxiosTest;

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :