在项目过程中遇到的一些问题和解决方法
1.如果注入了 model但是发现怎么也访问不了想访问的那个接口，可以一层一层的通过打console.log来检查，如果已经进入了service层，很有可能是api接口写错了，需要注意的是最开始的“/”
INTRODUCTION:'/lab_introduction/lab_introduction',2.项目中遇到需要状态的部分，可以单独写一个文件，如果返回的状态不是想要的那个状态，检查一下和后端的数据类型是否一致
const PROJECTSTATUS = {
SAVE: 0,
PUBLISH: 1,
};
3.数据的分页有两种处理方式，一种是在pageProps里面利用回调函数onChange，一种是在组件中单独写一个turnPage函数，利用参数e，两种方法都可以实现分页，当确定函数写正确之后，如果不能正确的翻页，检查models里面的函数，看函数里面写的名字和后端返回的名字是否相同
turnPage = (e) => {
const { current, pageSize } = e;
const { dispatch } = this.props;
dispatch({
type: 'enrollment/getAllList',
payload: {
page: current,
pageSize,
},
});
};
pagination: {
...pagination,
onChange (page, pageSize) {
dispatch({
type: 'personbase/listpage',
payload: {
pageSize,
page,
},
})
},
},
4.有时候会出现进入主页面之后没有点击新增,Modal就自己跳出来的情况，是因为在上次点击新增确定之后并没有隐藏掉它，所以下一次进入的时候它会显示出来。同时需要注意到的是，在隐藏的同时需要将里面的数据置为空，以保证下次新增的时候里面的数据是空的。
hiddenModal(state) {
return {
...state,
visible: false,
currentRow: {
num: 0,
title: '',
date: '',
email: '',
},
};
},5.在增加上传图片的组件之后，新增一个之后会出现之前上一次上传的图片会出现在新增的页面中。这是因为models中还存在着上次上传的数据。我们可以在index.js的声明周期中，执行updateState，将baseSource置为空
dispatch({
type:'enrollment/updateState',
payload:{
baseSource:{},
},
});updateState(state, action) {
return {
...state,
...action.payload,
};
},6.在上传图片的编辑页面保存之后会进入预览页面，如果在预览页面返回的话就看不见之前上传的图片了，但是在获取到的数据中是存在之前上传的图片的。后来检查了很久发现是因为我把上传的图片放在了Card里面，然后给Card加了一个loading。一般是需要异步请求的数据需要加loading，比如表格，input框中的内容。
<Card
title="图片内容"
style={{ marginBottom: '20px' }}
bordered={false}
>
<Row>
<Col>
<ImageUploader {...uploaderProps} />
</Col>
</Row>
</Card>在项目过程中学到的新知识
1.关于pathToRegexp
一种可能含有某种匹配模式的路径字符串是它的必选参数，它会返回一个正则对象。然后调用exec将请求路径与这个正则匹配起来
const pathToRegexp = require('path-to-regexp');
const match = pathToRegexp('/introduceInfo/:id').exec(this.props.history.location.pathname);2.关于loading
loading可以监听异步请求的状态，当异步请求结束之后返回false。
因为多个页面可能共用同一个models，所以当从一个页面进入另一个页面时，可能出现已经进入页面，但是数据还没有获取回来的情况，如果不加loading会出现以前的数据，为了避免这种情况的发生，我们可以在适当的 地方加入loading
@connect(({ introduce, loading }) => ({
introduce,
loading: loading.effects['introduce/getInfo'],
editloading: loading.effects['introduce/editInfo'],
}),
)3.关于数据类型转换
像是类似于日期这种数据，在提交给后台之前我们需要对数据类型进行处理，否则访问接口会失败getNowFormatDate函数对数据进行转换
export function getNowFormatDate(time) {
const date = time ? new Date(time) : new Date();
const seperator1 = '-';
const seperator2 = ':';
let month = date.getMonth() + 1;
let strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = `0${month}`;
}
if (strDate >= 0 && strDate <= 9) {
strDate = `0${strDate}`;
}
const currentdate = `${date.getFullYear() + seperator1 + month + seperator1 + strDate
} ${date.getHours()}${seperator2}${date.getMinutes()
}${seperator2}${date.getSeconds()}`;
return currentdate;
}conclusion
这是用ant design写的第一个项目，在做完这次项目之后，对它的数据流向，路由切换等有了更为清楚的了解，做的东西整体来说就是一个表单，怎么提交，怎么增加，删除，编辑和发布都比较清楚了，但是还是有很多学习的地方，上传文件的组件是别人写的，我直接引用的，这其中还有很多值得思考的地方
