今天來(lái)學(xué)習(xí)第二節(jié)課程，完成列表數(shù)據(jù)的展示

效果：

首頁(yè)列表

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="數(shù)據(jù)正在加載中">
  <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 四個(gè)ui組件。

• List 列表
• Avatar 頭像
• Icon 圖標(biāo)
• Spin 數(shù)據(jù)加載
• pagination 分頁(yè)
  componentWillMount 周期中獲取列表數(shù)據(jù)，mapStateToProps 將model中的state數(shù)據(jù)和組件的props綁定，利用connect將兩者連接。這樣只要state中的數(shù)據(jù)發(fā)生變化，props就會(huì)發(fā)生變化，view視圖就會(huì)重新渲染。

2. 創(chuàng)建組件的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的命名空間，在組件中綁定時(shí)要注明

命名

3. 創(chuàng)建組件的service list.js

這里面主要寫獲取數(shù)據(jù)的方法，就是請(qǐng)求api。有點(diǎn)像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會(huì)在model中的effects 中調(diào)用，effects中處理異步請(qǐng)求，之后action去reducers中更新state。

4. 開(kāi)啟代理

我們?cè)诒镜卦L問(wèn)cnode的api接口會(huì)有跨域，所以要進(jìn)行代理。修改.webpackrc：

{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ],
  "proxy": {
        "/api": {
            "target": "https://cnodejs.org/",
            "changeOrigin": true,
            "pathRewrite": { "^/api": "/api" }
        }
    }
}

cnode api說(shuō)明:https://cnodejs.org/api

5. 在首頁(yè)使用組件

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);

好了現(xiàn)在你就可以看到效果了。
沒(méi)解決的坑：
分頁(yè)組件的使用，因?yàn)樗前纯偟臄?shù)據(jù)記錄以及每頁(yè)數(shù)據(jù)量來(lái)自動(dòng)分頁(yè)的，而cnode的api是按頁(yè)碼和每頁(yè)數(shù)據(jù)量來(lái)直接返回?cái)?shù)據(jù)，所以沒(méi)法知道total。因此我默認(rèn)寫了total=“500”.
歡迎關(guān)注我的公眾號(hào)mike啥都想搞，學(xué)習(xí)更多內(nèi)容。

mike啥都想搞

下期預(yù)告：

詳情功能組件完成