课程简介
Umi和Dva初学者课程,通俗易懂,循序渐进,搭配专用后端接口,实现用户列表的真实增删改查操作。 基于Umi3版本实现,知识点涉及Umi/Dva/React Hook/Ant Design/TypeScript。
标准普通话,建议1.5倍速观看。共20集。
本人为前端初学者,本视频课程只求为初学者快速入门,知识的精确度较低,望体谅。凡有错误或不当之处,欢迎批评。凡有疑问,欢迎在本页留言讨论(所有发言需审核后显示)。
2022年课程提示
(点击图片可查看大图)
在线视频
百度网盘: 云盘下载 提取码: pflw
维护截止
2021年12月,超过该日期后将不提供咨询,或可能下线视频。
本课程目前已停止咨询。
最终代码
https://github.com/aspirantzhang/umi3-grud.git
https://gitee.com/aspirantzhang/umi3-crud.git
已知错误
P8第9分钟左右出现的错误,三种解决方法,三选一:
1. 按课程中介绍的解决方法。加一层对象。
2. 直接改Table组件的dataSource={users.length ? users : []}
3. 直接改model文件中,state: []
这个原因主要是Table的dataSource只认识 “数组或者undefined”,但是在P8定义model时,state写为了{} ,是空对象,不是空数组。页面第一次渲染时,数据还没拿到,那时候是个空对象,它不认识,所以直接报错。
第一种解决方法中,如果我们改成了users.xxx,这样它第一次获取时,是undefined。Table认识undefined。
第二种解决方法中,我们首先判断了一下,如果users还是空的,那先给它空数组。
第三种解决方法中,我们修改当前model的默认值为空数组,一切解决。
实际这个问题主要是当时对类型的意识还不太明确,后面慢慢就懂了。
同学反馈
1599925xxx同学 在2022年3月2日教授我一个p19课程中loading另外这种处理方法:
提交表单的这个操作走model也可以比较方便地处理loading。正常情况的话dispatch操作发送action一般就是携带type和payload这两个属性,其实也可以携带其他属性。如果希望异步操作完成之后做一些操作,可以在action里面添加一个callback属性,存一个回调函数,然后在Effect函数的参数中把callback解构出来,在call操作后调用这个回调函数,这样就可以实现异步操作后执行特定的操作。代码实例放在下面了,实践了一下也可以实现loading的控制,不用把调用后端接口的操作放在UI组件中了。
React新手课程推荐
【智能社】ES6精讲—ECMAscript6精通系列(基础篇)
公众号 / 群推荐
Umi官方群 | Alibaba F2e | 云谦 |
|
|
|
资料推荐
https://github.com/sorrycc/blog/issues –所有云谦发过的文章都建议要读一遍
https://github.com/umijs/umi/issues –遇到任何问题可以先到issues来找一找
https://sorrycc.com/ –云谦博客
后续
后续课程:React入门进阶 – 基于Ant Design Pro v5和Formily v1的动态模型网站后台
提示:后续课程非零门槛,请先学本课程。
录制资料
摄像头:罗技C270 | 录屏:Bandicam | 视频编辑:Apowersoft Video Editor | 画图:FSCapture
版权声明
本视频不可发布在具有“视频前广告的视频网站”,如优酷等。严禁用于盈利,不可用于任何商业目的,禁止断章取义。遵循以上前提之下,可任意转载、分发,无需通知作者。