react项目开发问题整理

1. react中路由跳转后页面不置顶问题：从页面A跳转到页面B，页面A滚动到中间位置，跳转后页面B也会在中间位置
解决：在顶部组件的生命周期中进行判断，例如
componentWillReceiveProps(nextProps){
　　//当路由切换到新页面时置顶
　　if(this.props.location !== nextProps.location){
　　　　window.scrollTo(0,0)}}

2. 数组map遍历提示需要加key 但不要直接给 index, 因为如果增加或者删除子项目时，index 都会变，导致出问题
解决：引入包 nanoid

3. button绑定click事件传参，未点击触发
解决：参数应设置为一个函数，尽量避免内联影响效率

4. state更新无变化问题

解决：注意深浅复制

5. render 返回格式
解决：return的内容若有多个节点需要在最外层包一个空盒子用fragment可提高效率

6. react-hooks中的useState是一个异步的操作，如何实时获取到更新后的新的State状态呢？
useEffect(()=>{
setState(state);
},[state]);

7. 使用redux存储数据，页面刷新后数据丢失：采用redux-persist

8. 单页面应用实现前进与后退功能异常（一般不会出现）
原因：ajax进行局部数据更新时，浏览器地址栏的url链接没有改变，所以浏览器也就不会保存记录
解决：window.location.hash的值

9.全选翻页、分页配置问题：对table列表数据进行全选功能后翻页, 会导致原来选中的数据被清空
原因：antd的全选按钮, 只选择到了当前页的数据, 当切换之后又是另一页数据了.
解决：将列表数据变成二维数组, 实现多页操作, 并将数据扁平化之后加到需要添加进去的列表中

react项目开发问题整理相关推荐

react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
React项目开发中的数据管理
原文链接:https://blog.csdn.net/hl582567508/article/details/76982756 redux中文文档:http://cn.redux.js.org/ Re ...
外包项目开发课程整理一：SDLC传统系统开发生命周期7个阶段
外包项目开发课程整理一:SDLC传统系统开发生命周期7个阶段前言: 课程全称为:通过案例学习外包项目开发,是软件工程专业大三下的课程,我将根据中方外方ppt教授讲述内容及上网搜索的知识对本课程进行系 ...
外包项目开发课程整理三：Selfsourcing（自主开发）及 Prototyping（打造原型）
外包项目开发课程整理三:Selfsourcing(自主开发)及 Prototyping(打造原型) 课程整体内容: Insourcing and the SDLC(内包及系统开发生命周期):定义传统 ...
学成在线项目开发技巧整理---第一部分
学成在线项目开发技巧整理---第一部分 1.数据字典 2.http-client远程测试插件,可以保存测试数据 3.三种跨域解决 4.具有多层级数据查询思路 5.Mybaits分页插件原理 6.根据文 ...
基于Arduino、ESP8266的物联网项目开发方案整理、毕业设计（第一波）
文章目录 1.背景 2.资料介绍 2.1 Arduino官方认证 2.1.1 开发板类 2.1.2 温湿度传感器 2.1.3 光照度传感器 2.1.4 测距传感器 2.1.5 声音模块 2.1.6 显 ...
基于Arduino、ESP8266的物联网项目开发方案整理、毕业设计（第三波）
文章目录 1.背景 2.项目整理 2.1 挪威牛栏气体检测 2.1.1 功能介绍 2.1.2 实物图片 2.1.3 视频 2.1.4 源代码 2.2 触摸屏显示称重 2.2.1 功能介绍 2.2.2 ...
react项目开发中出现浏览器翻译功能造成的bug
最近使用react开发一个项目时,测试提出一个bug,说是在某些浏览器上面本来是序号''5''变成了大写的''五'' 自己却一直无法重现,最后发现是测试人员浏览器打开了翻译功能解决方案: 解决思路是 ...
React 项目开发问题积累
React 开发问题积累 1. 修改antd的组件样式 2. antd级联选择框(后台数据渲染) 1. 修改antd的组件样式问题:直接修改样式好像不起作用,直接在组件上加style行内样式也不生效 ...

react项目开发问题整理

react项目开发问题整理相关推荐

最新文章

热门文章