使用antv及在model中新发现的问题小结

今天在打算使用viser图来插入到自己的界面中时出现了一系列的问题，究其根本是自己还没有掌握一步步去排查错误的方法，且对于dva中的model里面的运行机制没有做到透彻理解。（viser是真的很好用，自己不需要去造轮子，呈现图的时候也不需要自己去实现横纵坐标、图例及提示框，完全都已经封装好了直接调用就可以）下面呈现此次的过程：

我的目标是这样：使用mock数据来在界面展现一个折线图。，如图：

该图的实现方法直接复制的viser里面的相关方法（这里展示的是viser里面实现该组件的原始数据及方法，我现在要做的就是把里面的静态数据换成模拟数据、经过调用接口等操作展示出来）：

import { Chart, Tooltip, Axis, Legend, Line, Point } from 'viser-react';
import * as React from 'react';
const DataSet = require('@antv/data-set');

const sourceData = [
  { month: 'Jan', Tokyo: 7.0, London: 3.9 },
  { month: 'Feb', Tokyo: 6.9, London: 4.2 },
  { month: 'Mar', Tokyo: 9.5, London: 5.7 },
  { month: 'Apr', Tokyo: 14.5, London: 8.5 },
  { month: 'May', Tokyo: 18.4, London: 11.9 },
  { month: 'Jun', Tokyo: 21.5, London: 15.2 },
  { month: 'Jul', Tokyo: 25.2, London: 17.0 },
  { month: 'Aug', Tokyo: 26.5, London: 16.6 },
  { month: 'Sep', Tokyo: 23.3, London: 14.2 },
  { month: 'Oct', Tokyo: 18.3, London: 10.3 },
  { month: 'Nov', Tokyo: 13.9, London: 6.6 },
  { month: 'Dec', Tokyo: 9.6, London: 4.8 },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'fold',
  fields: ['Tokyo', 'London'],
  key: 'city',
  value: 'temperature',
});
const data = dv.rows;

const scale = [{
  dataKey: 'month',
  min: 0,
  max: 1,
}];

export default class App extends React.Component {
  render() {
    return (
      <Chart forceFit height={400} data={data} scale={scale}>
        <Tooltip />
        <Axis />
        <Legend />
        <Line position="month*temperature" color="city" />
        <Point position="month*temperature" color="city" size={4} style={{ stroke: '#fff', lineWidth: 1 }} shape="circle"/>
      </Chart>
    );
  }
}

将service、model及index都写好后，觉得在逻辑上没有什么问题了，但是打开界面发现出错了，没有任何的图表还有数据，于是将index里面的引入的数据进行打印，发现为空数组。然后跑到model里面去打印query里从后台查询出来的数据，但是发现控制台里无法显示我想打印的东西，下面的people是从后台去取得数据：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Row, Col, Card } from 'antd'
import { color } from 'utils'

import { Page } from 'components'
import  App  from '../components/dash'
import App2 from '../components/People'
//import styles from './index.less'
const DataSet = require('@antv/data-set');
const bodyStyle = {
    bodyStyle: {
        height: 443,
        background: '#fff',
    },
}

const Blb = ({ blb, loading }) => {
    //下面就算只有一个sales也要用大括号括起来
    const { people } = blb
    console.log(people)

    return (
        <Page loading={loading.models.blb && people.length === 0}>
            <Row gutter={24}>
             <Col lg={18} md={24}>
             <Card bordered={false}
               bodyStyle={{
                   padding: '24px 36px 24px 0' }}
             >
             <App />
             </Card>
             </Col>
             </Row>
             <Row gutter={24}>
             <Col lg={18} md={24}>
             <Card bordered={false}
               bodyStyle={{
                   padding: '24px 36px 24px 0' }}
             >
             <App2 data1={people}/>
             </Card>
             </Col>
             </Row>
             </Page>
            
    )
}

export default connect(({ blb, loading }) => ({ blb, loading }))(Blb)

在model中打印data，控制台无任何输出：

这时候就要考虑了，在dva的model操作中，步骤是这样子的：

一个系统之中会有多个界面，我们建立了一个订阅机制，监听当前界面的路径，如果这个路径匹配成功，那么就发起一个action，这个action会有一个dispatch类型（函数），类型里面就是确定完这个路径后接下来需要往哪里调用哪个函数去拿到数据：

subscriptions: {
        setup ({ dispatch, history }) {
            history.listen(({ pathname }) => {
                console.log(pathname)
                if(pathname === '/blb' || pathname === '/') {
                    dispatch({ type: 'query' })
                }
            })
        },

接下来是实现query：

 effects: {
        *query ({ payload }, {call ,put }) {
            const data = yield call(query, parse(payload))
           console.log(data)
            yield put({
              type: 'updateState',
              payload: data,
            })
        },
    },

以上就是在model层一个对数据的操作。。

刚才说到，打印query里面的data，控制台里面没有任何东西。这时候需要考虑，在进行传输数据时，是不是还没有走到query这一步？ 所以回到subscription中，打印一下pathname,看一下路径是否正确。打印出来结果是：

确认过眼神，是路径错了。

把路径修改为console出来的，我的图就出来了。

现在对于dva还是不熟，老是踩坑。