当前位置: 首页 > news >正文

react跳转页面redux数据被清除

关键代码如下,页面中有根据redux中state展示的数据,然后在组件卸载的时候会清空redux中存的数据,点击a标签可以打开新的标签页,如下代码会在打开新的标签页,组件卸载,清空redux数据,页面展示的也就是空的了

const getImage = () => {window.open('/', '_blank')
}const HrefPage = () => {useEffect(()=>{return ()=>{resetState() //组件卸载的时候,清空redux存的数据}},[])return <a onClick={getImage} href="#">跳转</a>
}export default HrefPage

1. 刚开始以为是跳转页面组件卸载的问题【之前打开新tab页也不会清数据啊,没有深入研究这个问题】,把resetState去掉就可以了,但是在切换菜单栏再切回来的时候还是会保留redux数据,所以不能解决问题

2. 然后使用url状态同步,把页面展示的redux存在url params上,发现还是有些数据展示有问题

3. 最后看了下跳转的逻辑,发现a标签中设置href为#,导致点击跳转的时候,当前tab下的页面再次回到当前路径,引起组件卸载,把href参数去掉就可以了

最终解决方案:去掉a标签的href,然后全局搜了下,发现不止一个地方这么配置了,都给去除了,一个小小的参数引起的问题,记录下,以防再犯

http://www.lryc.cn/news/152072.html

相关文章:

  • Spring Cloud 微服务2
  • 侯捷课程笔记(一)(传统c++语法,类内容)
  • 自动化安装Nginx脚本:简化您的服务器配置
  • 通过es索引生命周期策略删除日志索引
  • 网络实验 VlAN 中 Trunk Access端口的说明及实验
  • 打包个七夕exe玩玩
  • ReactNative 井字游戏 实战
  • 五-垃圾收集器G1ZGC详解
  • opencv入门-Opencv原理以及Opencv-Python安装
  • k8s etcd 简介
  • 分页功能实现
  • 普通制造型企业,如何成就“链主品牌
  • 04_22 vma(进程下的每个虚拟内存区域查看)对象实战
  • QWidget的ui界面绘制成图片
  • 【ICer的脚本练习】脚本使用的思维培养 —— 用例回归
  • 【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求
  • Android——基本控件(下)(二十一)
  • websocket基础
  • 游戏思考30(补充版):关于逆水寒铁牢关副本、白石副本和技能的一些注释(2023/0902)
  • 【数据蒸馏】静态数据蒸馏方法汇总
  • Cortex-A7 架构
  • 2023年“羊城杯”网络安全大赛 Web方向题解wp 全
  • Matlab——二维绘图(最为详细,附上相关实例)
  • JVM学习(四)--内存问题分析思路
  • 【MySQL】七种SQL优化方式 你知道几条
  • MySQL8.xx 解决1251 client does not support ..解决方案
  • SpringBoot常用的简化开发注解
  • python相关
  • C语言的类型转换
  • 从零构建深度学习推理框架-11 Resnet