React.js集成axios

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

yarn add axios

在react工程里，引入axios

import axios from 'axios';

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

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

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

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

        data: [] //先空着
    }
}

（1）读取网络数据

<?php
header("Access-Control-Allow-Origin: *");
echo '[{"key": "1", "name": "Joe.Ye", "gender": "男"}, {"key": "2", "name": "AppBlog.CN", "gender": "男"}]';
?>

<Button onClick={this.readData}>测试数据</Button>

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

（2）读取数据显示到表格中

<Button type="primary" onClick={this.bindData.bind(this)}>读取表格数据</Button>

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

完整代码

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;