今天來學習第二節課程,完成列表數據的展示
效果:
1. 新建ListData組件
import React , { Component }from 'react';
import { List, Avatar, Icon, Spin } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'dva';
class ListData extends Component{
render() {
const IconText = ({ type, text }) => (
<span>
<Icon type={type} style={{ marginRight: 8 }} />
{text}
</span>
);
console.log(this.props)
return (
<Spin spinning={this.props.loading.global}
size='large'
tip="數據正在加載中">
<List
itemLayout="vertical"
size="large"
pagination={{
onChange: (page) => {
console.log(page);
this.props.dispatch({ type: 'listdata/query', payload: { page:page,pageSize:this.props.pageSize,type:'all'} })
},
pageSize: this.props.pageSize,
total:500
}}
dataSource={this.props.pageData}
renderItem={item => (
<List.Item
key={item.title}
actions={[<IconText type="star-o" text={item.visit_count} />, <IconText type="like-o" text={item.visit_count} />, <IconText type="message" text={item.reply_count} />]}
>
<List.Item.Meta
avatar={<Avatar src={item.author.avatar_url} />}
title={<a>{item.author.loginname}</a>}
description={item.create_at}
/>
{item.title}
</List.Item>
)}
/>
</Spin>
);
}
componentWillMount () {
const { dispatch, type, pageSize,page} = this.props
dispatch({ type: 'listdata/query', payload: { page,pageSize,type} })
}
};
ListData.propTypes = {
type: PropTypes.string.isRequired,
pageSize: PropTypes.number.isRequired,
};
function mapStateToProps(state) {
const {pageSize,type,page,pageData} = state.listdata;
return {
pageSize,
type,
page,
pageData,
loading:state.loading
};
}
// export default ListData;
export default connect(mapStateToProps)(ListData);
用到了antd中的List, Avatar, Icon, Spin 四個ui組件。
- List 列表
- Avatar 頭像
- Icon 圖標
- Spin 數據加載
- pagination 分頁
componentWillMount 週期中獲取列表數據,mapStateToProps 將model中的state數據和組件的props綁定,利用connect將兩者連接。這樣只要state中的數據發生變化,props就會發生變化,view視圖就會重新渲染。
2. 創建組件的model listdata.js
import * as listService from '../services/list';
export default {
namespace: 'listdata',
state:{
pageSize:20,
page:1,
pageData: [],
type: 'all'
},
effects: {
*query({ payload: { page,pageSize,type } }, { call, put }) {
const result = yield call(listService.query, { page,pageSize,type })
yield put({
type: 'updateData',
payload: {
result,
page,
pageSize,
type
}
})
}
},
reducers: {
'updateData'(state, { payload: data }) {
let r = data.result.data.data
let {pageSize,page,type} = data
return {...state,pageSize,page,pageData:r,type}
}
},
subscriptions : {
setup({ dispatch, history }) {
// return history.listen(({ pathname, query }) => {
// if (pathname === '/') {
// dispatch({ type: 'query', payload: { page:1,pageSize:10,type:'all' } });
// }
// });
}
},
};
注意申明瞭listdata的命名空間,在組件中綁定時要註明
3. 創建組件的service list.js
這裏面主要寫獲取數據的方法,就是請求api。有點像java裏的dao層,route像java裏的controller層
import request from '../utils/request';
export function query({ page,pageSize,type }) {
return request(`/api/v1/topics?page=${page}&limit=${pageSize}&tab=${type}`);
}
service會在model中的effects 中調用,effects中處理異步請求,之後action去reducers中更新state。
4. 開啓代理
我們在本地訪問cnode的api接口會有跨域,所以要進行代理。修改.webpackrc:
{
"extraBabelPlugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
],
"proxy": {
"/api": {
"target": "https://cnodejs.org/",
"changeOrigin": true,
"pathRewrite": { "^/api": "/api" }
}
}
}
cnode api說明:https://cnodejs.org/api
5. 在首頁使用組件
import React from 'react';
import { connect } from 'dva';
import MyHeader from '../components/MyHeader';
import ListData from '../components/ListData';
function IndexPage() {
return (
<div>
<MyHeader keys={['index']}/>
<div style={{paddingTop:20,paddingLeft:100,paddingRight:100,paddingBottom:50}}>
<ListData type='all' pageSize='10'/>
</div>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
好了現在你就可以看到效果了。
沒解決的坑:
分頁組件的使用,因爲他是按總的數據記錄以及每頁數據量來自動分頁的,而cnode的api是按頁碼和每頁數據量來直接返回數據,所以沒法知道total。因此我默認寫了total=“500”.
歡迎關注我的公衆號mike啥都想搞
,學習更多內容。
下期預告:
詳情功能組件完成