Antd中Table控件呈现网络获取的json数据（教程）

最近为了实现将从网络获取的json数据呈现了table中，做了几种尝试，最后确定了一种方案，即map解析获得的网络数据，将需要的data值丢到状态机state中，然后在呈现部分引用antd中的table，这样便达到了需要的效果。

1、呈现结果

2、普通用法

table的普通用法可以参考antd中table的用法：https://ant.design/components/table-cn/。 这里粘出我跑出来的代码以及部分模块的说明。

import React, { Component } from 'react';
import { Table } from 'antd'
//引入antd样式，否则数据呈现便没有样式
import 'antd/dist/antd.css';
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      //用状态机来控制呈现的header
      columns:[{
        title: '学号',
        dataIndex: 'num',
        key: 'num',
      }, {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
      }],
      //用状态机来控制呈现的数据
      dataSource: [{
        key: '1',
        num:'2014669',
        name: '张三',
        sex: '男',
      }, {
        key: '2',
        num:'2014670',
        name: '李四',
        sex: '男',
      }]
    }
  }
  render() {
    return (
        
    )
  }
}

3、网络获取数据json数据table呈现

代码与上面代码没有什么差别，但是多了一步在componentWillMount中模拟从网络获取的数据，此时需要对网络获取的数据进行解析，丢到dataSource中，在render中引用this.state.dataSource进行呈现。

//引用同上
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
     ……
      dataSource: []
    }
  }
  componentWillMount() {
    //模拟获取的网络数据，数据如下
    const data = [{
      num: '2014669',
      username: '张三',
      usersex: '男'
    }, {
      num: '2014670',
      username: '李四',
      usersex: '男',
    }, {
      num: '2014671',
      username: '翠花',
      usersex: '女',
    }, {
      num: '2014672',
      username: '朵儿',
      usersex: '女',
    }];
    //对模拟的网络数据进行解析，丢到datasource中
    data.map((v,i)=>{
      this.state.dataSource.push({
        key:'i',
        num:v.num,
        name:v.username,
        sex:v.usersex
      })
    })
  }
  render() {
    return (
      

4、总结

table对于呈现相对来说比较大的数据量还是挺美观和规整的，而且只要数据格式对了，只引用Table标签就可以对数据进行呈现了。这篇博客主要目的是为了模仿数据从网络获取，在table中进行呈现，希望这篇博客对你有所帮助。