本小节，我们需要实现异步载入数据并通过表格展现出来。该表格需要支持排序以及过滤功能。
此处将会用到我们上一章学会的知识模拟异步数据，如果你尚未理解 model 相关内容，可以再过一遍第三章以理解。

引入相关依赖

首先，编辑我们刚刚创建的 src/page/list/index.js 文件。将需要用到的依赖加入。

  1. import { Table } from 'antd';
  2. import { connect } from 'dva';

连接 dva

我们对 export 进行调整，将 dva 中的数据传入。\

  1. function mapStateToProps(state) {
  2.   return {
  3.     cardsList: state.cards.cardsList,
  4.     cardsLoading: state.loading.effects['cards/queryList'],
  5.   };
  6. }
  8. export default connect(mapStateToProps)(List);

其中当用户 dispatch 对应 effect 时，dva 会自动注入对应 effect 的 loading 状态。
因而我们可以很方便的将 state.loading.effects 中的状态传入。
（对应 card modal 代码请参阅 src/modal/cards.js 文件。）

获取数据

添加 componentDidMount 事件，使得我们可以在组件加载时触发异步请求。

  1. componentDidMount() {
  2.   this.props.dispatch({
  3.     type: 'cards/queryList',
  4.   });
  5. }

当我们调用 connect 后，props 会传入 dispatch 方法供用户触发 Action。

展示表格

接着，我们定义表格所需要的列。

  1. class List extends React.Component {
  2.   columns = [
  3.     {
  4.       title: '名称',
  5.       dataIndex: 'name',
  6.     },
  7.     {
  8.       title: '描述',
  9.       dataIndex: 'desc',
  10.     },
  11.     {
  12.       title: '链接',
  13.       dataIndex: 'url',
  14.     },
  15.   ];
  17.   // ...
  18. }

修改 render 方法展示出 Table。

  1. render() {
  2.   const { cardsList, cardsLoading } = this.props;
  4.   return (
  5.     <div>
  6.       <Table columns={this.columns} dataSource={cardsList} loading={cardsLoading} rowKey="id" />
  7.     </div>
  8.   );
  9. }

这时，刷新页面就可以看到效果了。

添加链接

我们在表格中最后一列显示的是一个超链接文本，这并不太方便。对其做些修改，使得用户可以直接点击超链接打开页面。

对 columns 中 url 列进行修改添加 render 方法。

  1. {
  2.   title: '链接',
  3.   dataIndex: 'url',
  4.   render: value => <a href={value}>{value}</a>,
  5. },

表格 - 图1

一个简单的表格便完成了，下一节我们将添加一个表单用于创建新的数据到表格中。