这里是基础 其他的页面交互都建立在数据交互之上 不详细的可私信一起探讨交流

1、 需求：

后台给一个接口，获取相应的数据之后进行跳转到一个对应页面

2、使用的是dva的脚手架新建的项目

• 目录结构
• 在 dva 中，通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）。
• 简单来说，就是routes放需要进行数据交互的组件，components放公共组件。
• 添加样式:
  CSS Modules会给组件的className加上hash字符串，来保证className仅对引用了样式的组件有效，如styles.normal可能会输出为normal___39QwY。
  className的输出格式可以通过webpack.config进行修改。
  

3、首先拿到一个接口，需要在/services/api.js进行传入，

• 情况一 不需要给后台返回任何参数

import request from '../utils/request';
import networkUtils from '../utils/networkUtils';
export async function inquireAccountDetailSelfIdCard() { //inquireAccountDetailSelfIdCard 为方法名
    return request(networkUtils.getAction('inquireAccountDetailSelfIdCard'), {
    //inquireAccountDetailSelfIdCard 为接口名 一般这两者可设置为相同
        method: 'POST',
        body: networkUtils.getRequestBody({}),
      });
}

• 当需要给接口返回参数的时候

export async function 方法名 (payload在这里定义一个参数名字) {
  return request(networkUtils.getAction('接口名'), {
    method: 'POST',
    body: networkUtils.getRequestBody(payload),
  });
}

4、在/models/jumpPage.js 中请求接口数据
这里需要注意的是 需要在index.js 中使用

// 3. Model
app.model(require('./models/jumpPage').default);

//引入接口
import { inquireAccountDetailSelfIdCard } from '../services/api';
export default {
    namespace: 'jumpPage',
    state: {
    	//这里是需要存储从接口获取的数据 以获取数组为例
    	 dataList: [],
    },
    effects: {
    // 情况一 不要参数返回
        *handleGetSelfid({ payload }, { call, put }) {
            // 请求数据接口
            const response = yield call(inquireAccountDetailSelfIdCard);
            yield put({
                type: 'saveState',
                payload: response.datas[0],  
                //取得从接口中返回的数据中自己想要的数据值
            });
        }
        // 情况二  需要给接口返回数据
      *getApplicationPageList({ payload }, { call, put }) {
      	const response = yield call( inquireApplyMemberPageListRSTenant, payload 这里写参数);
      	yield put({
       	 type: 'getApplyPageList',
       	 payload: response.datas,
      });
    },
    },
    
// 进行数据处理
    reducers: {
        saveState(state, {payload}){
            return {
                ...state, 
                //将获取的数据存入定义的初始数组中
                dataList: payload.dataList,
            };
        },
    
    },
}

5、在/routes/JumpPage.js 中调用models中namespace中定义方法并获取数据

import React, { Component } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import  styles from './JumpPage.css';
import { message } from 'antd';

//绑定models的namespace到本组件中
@connect(({ jumpPage }) => ({
    jumpPage,
  }))

export  default class JumpPage extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'jumpPage/handleGetSelfid',
            payload: {
                
            },
        }
        ).then(() => {
        //从models 中的jumpPage得到的数据获取idCardNo的值
            const { jumpPage:{idCardNo} } = this.props;
            //获取当前url
            var  url = window.location.href;
            if (idCardNo !== "") {
                window.location.href=`http://www.jxeduyun.com/App.ResourceCloud/Src/index.php?app=changyan&mod=ThirdpartyLogin&act=autoLoginForCityNew&refType=1391&key=token&value${idCardNo}&validateUrl&url=${url}`;
            } else {
                message.error("身份证号码为空");
            }
        })
    }
    
    render() {
        return (
            <div>
                {/* <h1 className={styles.txt}>Loading...... </h1>  */}
                <div className={styles.spin}>
                    <Spin  size="large"/>
                </div>
            </div>
        );
    }
}

6、一切以官方为主
附上链接Dva.js