A series of problems appeared when I planned to use the visiter diagram to insert into my interface. The reason is that I have not mastered the step-by-step method to troubleshoot errors, and I did not do it for the operating mechanism in the model in dva. Thoroughly understand. (Viser is really easy to use, you don’t need to build wheels, and you don’t need to implement the horizontal and vertical coordinates, legends and prompt boxes when you present the map. They are completely packaged and can be called directly.) the process of:

My goal is this: use mock data to present a line chart on the interface. , As shown:

The implementation method of the figure directly copies the related methods in the visitor (shown here is the original data and methods of implementing the component in the visitor. What I want to do now is to replace the static data in the inside with simulated data, after calling the interface, etc. Show):

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

After writing the service, model and index, I feel that there is no logical problem, but there is an error when opening the interface, there is no chart and data, so the imported data in index is printed and found to be an empty array . Then ran into the model to print the data queried from the background in the query, but found that the console could not display what I want to print. The following people are to get the data from the background:

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 }) => {
    //Below, even if there is only one sales, it should be enclosed in braces
    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)

Print data in the model without any output from the console:

At this time, it is necessary to consider. In the model operation of dva, the steps are like this:

There will be multiple interfaces in a system. We have established a subscription mechanism to monitor the path of the current interface. If this path matches successfully, then initiate an action. This action will have a dispatch type (function). The type is determined. After finishing this path, where to call the function to get the data:

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

Next is to implement the query:

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

The above is an operation on the data in the model layer. .

As I said earlier, there is nothing in the console to print the data in the query. At this time, it is necessary to consider whether it has not reached the query step when transferring data. So back to the subscription, print the pathname and see if the path is correct. The printed result is:

Confirmed that the eyes were wrong.

Change the path to console, and my picture will come out.

I am still unfamiliar with dva, and always step on the pit.