dva页面获取并循环遍历对象数组

最新推荐文章于 2021-02-23 16:09:52 发布

lia0oo0

最新推荐文章于 2021-02-23 16:09:52 发布

阅读量610

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22251149/article/details/88985300

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先在model层初始化函数里用service层已写好的接口

    subscriptions: {
        setup({ dispatch, history }) {
            history.listen((location) => {
                if (location.pathname === '/forum') {
                    dispatch({
                        type: 'query',
                        payload: location.query || {},
                    })
                }
            })
        },
    },

 effects: {
        *query({ payload = {} }, { call, put }) {
            let plateList = yield call(plate.query, payload)
            let { success, message, status, data } = plateList
            if (success) {
                yield put({
                    type: 'getPlate',
                    payload: data.data,
                })
            } else {
                throw plateList
            }

            const articleList = yield call(article.query, payload)
            success = articleList.success
            data  =articleList.data
            if (success) {
                yield put({
                    type:'getArticle',
                    payload:data.data
                })
            } else {
                throw articleList
            }
        },
}

然后在view层connect获取并处理数组对象数据

方法一：
//使用将元素插入数组的方法
const Forum = ({ forum }) => {
    let { plateList, articleList } = forum
    var plateNameList = []
    for (let x in plateList) {
     //采用动态增加html元素的方法增加
        plateNameList.push(<div key={x} className={styles.side_list}>
            <br /><p>{plateList[x].plateName}</p>
        </div>)
    }

    return (
        <div className={styles.forum}>
                    {plateNameList}
                </div>
        </div>
    )
}
export default connect(({ loading, forum }) => ({ loading, forum }))(Forum)

方法二：
//直接使用  _.map(dataSource, function (item) { }）函数
   <TabPane tab="个人文章" key="1">
            {
              _.map(dataSource, function (item) {
                return (
                  <Row>
                    <Col>
                      <Card
                        key={item.id}
                        className={styles.card}
                        type="inner"
                        title="来自板块"
                        extra={[
                          <IconText text="删除" />,
                          <IconText text="只自己可见" />,]}
                      >
                        <div className={styles.articleName}>
                          <h1>{item.articleName}</h1>
                        </div>
                        <div className="text-card">
                          <div className={styles.imageRight}>
                          <Avatar shape="square" size="large" src={image} />
                          </div>
                          <h3>{userName}</h3>
                          <p>{description}</p>
                        </div>
                        <div className={styles.content} dangerouslySetInnerHTML={{ __html: item.content }}></div>
                      </Card>
                    </Col>
                  </Row>

                )
              })
            }
          </TabPane>

页面效果如下（虚拟效果，按数组数量自动增长的表）：