// import fetch from 'dva/fetch';function checkStatus(response) {if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default async function request(url, options) {
const response = await fetch(url, options);
checkStatus(response);
return await response.json();
}

import request from '../util/request';export default {
namespace: 'list',
state: {
data: [],
maxNum: 0
},reducers: {
addNewData(state, result) { //result就是拿到的结果数据
if(result.data){ //判断result中的data是否存在，如果存在，说明是初始化数据，直接返回
return result.data;
}let maxNum = state.maxNum + 1;
let list = [...state.data, maxNum];
return { //更新状态值
data: list,
maxNum: maxNum
}
}
},
effects: { //新增effects配置，用于异步加载数据
*initData(params, sagaEffects) { //定义异步方法
const {call, put} = sagaEffects; //获取到call、put方法
const url = "/ds/list"; // 定义请求的url
let data = yield call(request, url); //执行请求
yield put({ // 调用reducers中的方法
type : "addNewData", //指定方法名
data : data //传递ajax回来的数据
});
}
}
}

import React from 'react';
import { connect } from 'dva';const namespace = 'list';const mapStateToProps = (state) => {
const listData = state[namespace].data;
const maxNum = state[namespace].maxNum;
return {
listData, maxNum
};
};const mapDispatchToProps = (dispatch) => {return {
addNewData : () =>{dispatch({
type: namespace + "/addNewData"
});
},initData : () => { //新增初始化方法的定义
dispatch({
type: namespace + "/initData"
});
}
}
}
@connect(mapStateToProps, mapDispatchToProps)
class List extends React.Component{
componentDidMount(){
this.props.initData(); //组件加载完后进行初始化操作
}
render(){
return (
<div>
<ul>
{
// 遍历值
this.props.listData.map((value,index) => {
return <li key={index}>{value}</li>
})
}
</ul>
<button
onClick={()=>{this.props.addNewData()}}>
添加
</button>
</div>
);
}
}export default List;

可以看到，返回的是html代码，所以会导致出错。

完整的List.js页面代码：

import React from 'react';
import { connect } from 'dva';const namespace = "list";// 说明：第一个回调函数，作用：将page层和model层进行链接，返回modle中的数据
// 并且，将返回的数据，绑定到this.props// 接收第二个函数，这个函数的作用：将定义的函数绑定到this.props中，调用model层中定义的函数
@connect((state) => {return {dataList : state[namespace].data,maxNum : state[namespace].maxNum}
}, (dispatch) => { // dispatch的作用：可以调用model层定义的函数return { // 将返回的函数，绑定到this.props中add : function () {dispatch({ //通过dispatch调用modle中定义的函数,通过type属性，指定函数命名，格式：namespace/函数名type : namespace + "/addNewData"});},init : () => {dispatch({ //通过dispatch调用modle中定义的函数,通过type属性，指定函数命名，格式：namespace/函数名type : namespace + "/initData"});}}
})
class  List extends React.Component{componentDidMount(){//初始化的操作this.props.init();}render(){return (<div><ul>{this.props.dataList.map((value,index)=>{return <li key={index}>{value}</li>})}</ul><button onClick={() => {this.props.add();}}>点我</button></div>);}}export default List;

完整的ListData.js页面代码：

import request from '../util/request';export default {namespace: 'list',state: {data: [],maxNum: 1},reducers : { // 定义的一些函数addNewData : function (state, result) { // state：指的是更新之前的状态数据, result: 请求到的数据if(result.data){ //如果state中存在data数据，直接返回，在做初始化的操作return result.data;}let maxNum = state.maxNum + 1;let newArr = [...state.data, maxNum];return {data : newArr,maxNum : maxNum}//通过return 返回更新后的数据}},effects: { //新增effects配置，用于异步加载数据*initData(params, sagaEffects) { //定义异步方法const {call, put} = sagaEffects; //获取到call、put方法const url = "/ds/list"; // 定义请求的urllet data = yield call(request, url); //执行请求yield put({ // 调用reducers中的方法type : "addNewData", //指定方法名data : data //传递ajax回来的数据});}}
}

完整的request.js页面代码：

// import fetch from 'dva/fetch';function checkStatus(response) {if (response.status >= 200 && response.status < 300) {return response;}const error = new Error(response.statusText);error.response = response;throw error;
}/*** Requests a URL, returning a promise.** @param  {string} url       The URL we want to request* @param  {object} [options] The options we want to pass to "fetch"* @return {object}           An object containing either "data" or "err"*/
export default async function request(url, options) {const response = await fetch(url, options);checkStatus(response);return await response.json();
}

四：mock数据

export default {
'get /ds/list': function (req, res) { //模拟请求返回数据
res.json({
data: [1, 2, 3, 4],
maxNum: 4
});
}
}