
React后台管理项目笔记
文章平均质量分 56
记录React项目遇到的难点,解决问题的思路,粗心导致以及版本更替导致均记录下来
VoiceU
这个作者很懒,什么都没留下…
展开
-
React中redux的学习记录
redux和react-redux一起应用的总结图reducer函数的形参是state 和 action,注意顺序不能错,首次render页面的时候会运行reducer把state的形参默认值输出,这个时候action只有type属性,没有data属性,而且type属性也不是指定的类型,所以会走default,在default里面return state就可以了。...原创 2021-04-29 09:35:21 · 144 阅读 · 0 评论 -
React既在constructor内部写state又在外部写了state的情况
React既在constructor内部写state又在外部写了state的情况下,state到底是里面生效还是外面生效,查了一下,没有说这俩同时的帖子,所以自己验证的时候第一个想法是考虑代码的顺序,还有constructor的特殊性看了一下react的生命周期勾子,新旧都是constructor排在第一位,下面验证阶段:1.只有外部有state的时候,有一个就不说了,直接就赋值了,讨论有两个会不会覆盖export default class Line extends Component {原创 2021-04-27 09:14:17 · 862 阅读 · 1 评论 -
React后台项目,返回上一级组件后,上一级组件重新加载导致返回页面不是目标页面而是起始页面(***)
React后台项目,返回上一级组件后,上一级组件重新加载导致返回页面不是目标页面而是上级组件的起始页面如图我点了第二页的详情进入了子组件,然后在子组件中点回来,但是却回到了第一页,因为父组件重新加载了,这个貌似得用到redux,但是目前还未学到那个地方,暂时记录一下,隔几天再解决-----2021.4.23返回后...原创 2021-04-23 15:34:55 · 449 阅读 · 3 评论 -
React项目添加页面中级联列表,选项的isLeaf问题(***)
2021.4.22暂未解决,记录下提醒自己,先做完后续再改原创 2021-04-22 10:33:02 · 251 阅读 · 0 评论 -
React中使用antd里Form组件表单验证,其中的input设置type为number,中文输入法却能却输入
场景如题,已经在此处设置了表单验证规则,并且input的type为number情况是,输入数字,不能输入,英文输入法下输入英文,也无法输入,但是用中文输入法,不按回车的情况下还能输入,打完字不按回车,直接点击输入框外的区域,还能保留下输入的内容,也不触发验证,但是最后提交会触发验证点击提交后...原创 2021-04-20 15:04:38 · 2953 阅读 · 2 评论 -
antd中Form组件的验证问题
遇到一个官方文档的案例不理解第二个函数式,理解是匿名函数,触发后返回一个包含validator函数对象的对象,但是为什么传参要用对象形式写,不直接写getFieldValue,看到后面才知道这里的form: FormInstance就是form的实例,虽然这里是冒号,但是感觉他写漏了花括号,这个应该是对象形式,就跟他例子一样,但是如果是这样为什么不直接写(( { FormInstance})=> xxx )反而写( ( form : FormInstance )=> xxx ).原创 2021-04-19 11:36:41 · 2152 阅读 · 0 评论 -
React路由history的跳转需要逐级写全
情景如下:我需要在http://localhost:3000/product下写一个跳转btn,跳转到addUpdate,所以我用了this.props.history.push()方法,但是当时对react中路由用法有点遗忘,所以写成了this.props.history.push(’/addUpdate’),结果发现,页面没有跳转,而且也没有跳转到product的重定向至/product页面 <Switch> <Route path='/prod原创 2021-04-18 09:10:36 · 526 阅读 · 0 评论 -
vscode中使用webpack,导入import less、css文件,引入页面无法快速ctrl点击跳转进入
如下有p.js p1.jsproduct.less等文件p.js可以通过ctrl加鼠标左键进行跳转,但是p1.js和product.less以及css文件则不行,原因是这种写法,要想跳转,必须在源文件处暴露一个出口,我在p.js里面export 一个x,但是另外俩文件都没有进行export,less文件和css文件本来就不暴露出口,虽然无法跳转,但是不影响在接口文件中能进行正常引入,至于为什么会有这篇记录,是因为教学视频中的IDE不同,里面用的是webstorm,就算less没有暴露出口也原创 2021-04-17 14:20:13 · 1375 阅读 · 0 评论 -
React中回调形式的标签属性(复习)
首先是教学视频中的代码:οnclick={ ()=>{this.props.history.push(’/product/detail’) }可以看到是没有花括号的,至于为什么要复习这个知识点,是因为我自己在写的时候,看到函数体只有一句的时候,想到的是有两种情况的,一是没有return,二是有retuyrn,在我自己写的时候,就给这里补上了return,自己的代码:(最初)<LinkButton onClick={()=>{return this.props.history.原创 2021-04-17 12:12:05 · 472 阅读 · 2 评论 -
antd中table组件的rowKey 的问题
rowKey中用string形式的时候,虽然是在jsx中用引号‘’,但是却不是单纯的string,这个string是指向的dataSource中对应的属性,应该是内部封装好了的,另一种形式就是函数形式传进来,return <Table rowKey={record => record.uid} />;这里面的record在之前的文章里面说过,是每一行的所有数据,所以是一个对象,里面包含有uid属性,DataSource是一个包含很多record对象的数组疑问最开始就觉得,虽然我原创 2021-04-14 10:43:14 · 14319 阅读 · 0 评论 -
跟做教学视频项目没有admin管理员账号
对于视频教学项目这种,跟着视频顺序走,在自己的数据库中是没有事先放入的验证数据等,比如后台管理的系统,先做了登录功能,但是却没有将管理员账号先放入数据库,在mongodb中因为没有放入数据,进去查看的时候也没有显示,找都找不到那个数据库的位置,这个时候查看后端代码,在其中查找添加用户的函数,可以看到是get方式还是post方式,以及请求地址,然后使用postman进行操作...原创 2021-04-12 19:52:53 · 117 阅读 · 0 评论 -
React后台管理项目疑难点整理(一)——Form表单版本不同
From表单组件因为antd的版本更新,导致教学视频里的3.0x和目前的4.0x很多不一样,甚至视频中用到的核心方法都弃用了,经过两天的研究,目前的解决方案如下,此次也算是本人第一次发现问题不再是简单的百度就能解决,需要到处看官方文档及例子,以及别人的帖子等资料,再加上自己挨着测试新方法的使用,因为视频中的方法使用的逻辑已经不适合当前,还得重新寻找解决方法,换思路用完全不同的办法达到想要的效果,虽然时间花了两天,但是收货还是颇丰昨天写过一篇记录问题的解决,但是那是比较杂乱的,此文会是总结,阐述具体情景,原创 2021-04-10 10:48:59 · 1410 阅读 · 1 评论 -
antd中Modal用Form表单填充,每次关闭时清空输入值
由于视频教程中用的antd版本还是低版本,当时还能用Form.create()方法,但是在本人学习的时候,该方法已经弃用,又觉得要解决问题,不能用降低版本的方式,既然弃用,肯定有新的解决方法,一味的跟视频模仿,学不了更多,首先看新版本的官方文档,Form中的api,暂时没有找到能解决的,能力有限 <Modal title="修改分类" visible={showStatus === 2} onOk={this.原创 2021-04-08 17:33:32 · 3233 阅读 · 0 评论 -
ant design表格table中render函数里面text和record参数的区别
先看官方文档解释:text表示当前行的值,record表示当前行的数据经过测试得出以下结论:对于要进行render 的列,如果写了对象里dataIndex这个变量,那么render的传参就按照截图中的三个参数来执行,第一个是该行对应的具体值,就是dataIndex指定的那个xxx,对应到dataSource里面对应的xxx如:const dataSource1 = [ { "parentId": "0", "原创 2021-04-05 14:04:06 · 11171 阅读 · 0 评论 -
React遍历antd库的icon出现的一些问题
用React进行动态遍历导航栏的时候,icon一直出不来,目前版本的antd已经和教学视频中的不一样了,要遍历的列表数组如下我改了icon为字符串的很多种形式,都不行遍历代码如下结果如下,无法显示想要的icon随后将icon导入list文件中,将列表中的字符串改成对象形式这次icon出来了,但是多级列表的title不显示,而且多级列表点进去样式也丢失了正常情况下该是这样后来发现是忘了写多级列表的title,但是子级列表样式依旧丢失,最终发现是给多级列表添加了List,本来该菜原创 2021-03-14 17:51:00 · 937 阅读 · 0 评论