当前位置: 首页 > 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,然后全局搜了下,发现不止一个地方这么配置了,都给去除了,一个小小的参数引起的问题,记录下,以防再犯

相关文章:

react跳转页面redux数据被清除

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

Spring Cloud 微服务2

Eureka 注册中心&#xff0c;服务的自动注册、发现、状态监控 Ribbon 负载均衡&#xff0c;Eureka中已经集成了负载均衡组件 Hystrix 熔断器&#xff0c;用于隔离访问远程服务、第三方库&#xff0c;防止出现级联失败。 Feign 远程调用&#xff0c;将Rest的请求进行隐藏&a…...

侯捷课程笔记(一)(传统c++语法,类内容)

侯捷课程笔记&#xff08;一&#xff09;&#xff08;传统c语法&#xff0c;类内容&#xff09; 2023-09-03更新&#xff1a; 本小节已经完结&#xff0c;只会进行小修改 埋下了一些坑&#xff0c;后面会单独讲或者起新章节讲 最近在学习侯捷的一些课程&#xff0c;虽然其中大部…...

自动化安装Nginx脚本:简化您的服务器配置

在如今的网络世界中&#xff0c;Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;扮演着至关重要的角色。然而&#xff0c;手动安装和配置Nginx可能会耗费大量时间和精力&#xff0c;特别是对于那些对Linux系统不太熟悉的人来说。幸运的是&#xff0c;我们为您带来…...

通过es索引生命周期策略删除日志索引

通过es索引生命周期策略删除日志索引 在es 7.x版本之后&#xff0c;多了个索引生命周期的概念&#xff0c;可以一系列的设置&#xff0c;给新生成的索引绑定生命周期策略&#xff0c;到期后&#xff0c;索引自动删除。 也可以通过linux定时任务实现&#xff0c;请查看另一篇文章…...

网络实验 VlAN 中 Trunk Access端口的说明及实验

网络实验 VlAN 中 Trunk Access端口的说明及实验 VlAN 虚拟局域网技术Access端口 工作原理Trunk端口 工作原理简单实验&#xff08;一&#xff09;划分不同Vlan&#xff0c;实现vlan内部通信拓朴图主机IP 配置划分Vlanping 测试 &#xff08;二&#xff09;跨交换机实现VLAN间通…...

打包个七夕exe玩玩

前段时间七夕 当别的哥们都在酒店不要不要的时候 身为程序员的我 还在单位群收到收到 正好后来看到大佬些的这个 https://www.52pojie.cn/thread-1823963-1-1.html 这个贱 我必须要犯&#xff0c;可是我也不能直接给他装个python吧 多麻烦 就这几个弹窗 好low 加上bgm 再打包成…...

ReactNative 井字游戏 实战

效果展示 需要的插件准备 此实战项目需要用到两个插件。 react-native-snackbar 底部信息提示组件。 react-native-vector-icons 图标组件。 安装组件&#xff1a; npm i react-native-snackbar npm i react-native-vector-icons npm i types/react-native-vector-icons /…...

五-垃圾收集器G1ZGC详解

回顾CMS垃圾收集器 G1垃圾收集器 G1是一款面向服务器的垃圾收集器&#xff0c;主要针对配备多颗处理器及大容量处理的机器。以及高概率满足GC停顿时间要求的同时&#xff0c;还具备高吞吐量性能特征 物理上没有明显的物理概念&#xff0c;但是逻辑上还是有分代概念 物理上分…...

opencv入门-Opencv原理以及Opencv-Python安装

图像的表示 1&#xff0c;位数 计算机采用0/1编码的系统&#xff0c;数字图像也是0/1来记录信息&#xff0c;图像都是8位数图像&#xff0c;包含0~255灰度&#xff0c; 其中0代表最黑&#xff0c;1代表最白 3&#xff0c; 4&#xff0c;OpenCV部署方法 安装OpenCV之前…...

k8s etcd 简介

Etcd是CoreOS基于Raft协议开发的分布式key-value存储&#xff0c;可用于服务发现、共享配置以及一致性保障&#xff08;如数据库选主、分布式锁等&#xff09;。 如&#xff0c;Etcd也可以作为微服务的注册中心&#xff0c;比如SpringCloud也基于ETCD实现了注册中心功能&#…...

分页功能实现

大家好 , 我是苏麟 , 今天聊一聊分页功能 . Page分页构造器是mybatisplus包中的一个分页类 . Page分页 引入依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.1</ver…...

普通制造型企业,如何成就“链主品牌

“链主品牌”通常掌握产业链主导地位&#xff0c;对于普通制造型企业看起来是遥不可及的事情&#xff0c;事实上并非如此。从洞察穿越周期的“链主品牌”规律来看&#xff0c;做螺丝起家的伍尔特、做宠物牵引绳的福莱希等小企业也可以成为“链主品牌”。另外&#xff0c;由于新…...

04_22 vma(进程下的每个虚拟内存区域查看)对象实战

前言 vma不太懂的可以往前翻 03_008内存映射原理_虚拟内存区域vm_area_struct详解,和mmap系统钓调用及物理内存结构体完全分析 vam 虚拟内存区域 每个进程下有多个vma 这次是查看每个vma的起始地址 结束地址和大小使用 1.进程在用户空间调用mmap也就是上面那个函数。 2.在当前…...

QWidget的ui界面绘制成图片

文章目录 源文件源码解释效果修复图片清晰度 源文件 #include "widget.h" #include "ui_widget.h"#include <QPixmap> #include <QDir>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 构造…...

【ICer的脚本练习】脚本使用的思维培养 —— 用例回归

系列的目录说明请见:ICer的脚本练习专栏介绍与全流程目录_尼德兰的喵的博客-CSDN博客 前言 脚本思维本质上是对重复人力操作的汇总与提炼,也就是说如果一件事情可以通过人不需要大量思考的按部就班操作能够完成,那么理论上脚本就可以进行替代。那么什么时候需要写脚本呢?这…...

【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

目录 1_认识Axios库2_axios发送请求3_axios创建实例4_axios的拦截器5_axios请求封装 1_认识Axios库 功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据 2_axios发送请求 支持多种请求方式: axios…...

Android——基本控件(下)(二十一)

1. 数据存储 1.1 知识点 &#xff08;1&#xff09;掌握Android数据存储的分类&#xff1b; &#xff08;2&#xff09;可以使用SharedPreferences存储数据。 1.2 具体内容 对于我们数据的存储而言&#xff0c;Android一共提供了5个数据存储的方式&#xff1a;SharedPrefe…...

websocket基础

下面就以代码来进行说明 1&#xff0c;先导入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> 2.编写websocket相关bean管理配置 Config…...

游戏思考30(补充版):关于逆水寒铁牢关副本、白石副本和技能的一些注释(2023/0902)

前期介绍 我是一名逆水寒的玩家&#xff0c;做一些游戏的笔记当作攻略记录下来&#xff0c;荣光不朽-帝霸来源视频连接 传送门 一、旧版铁牢关&#xff08;非逆水寒老兵服&#xff09; &#xff08;1&#xff09;老一&#xff1a;巨鹰 1&#xff09;机制一&#xff1a;三阵风…...

ROS2开发环境搭建避坑指南:Win11 + WSL2 + Ubuntu 22.04 从安装到测试的完整记录

ROS2开发环境搭建实战&#xff1a;Win11与WSL2深度适配指南 环境准备与系统调优 在Windows 11上搭建ROS2开发环境&#xff0c;选择WSL2作为Linux子系统是最佳实践方案。不同于传统虚拟机方案&#xff0c;WSL2提供了接近原生Linux的性能表现&#xff0c;同时完美集成Windows桌…...

Beyond Compare许可证获取与激活全攻略

1. Beyond Compare简介与许可证类型解析 Beyond Compare作为一款老牌文件对比工具&#xff0c;已经陪伴开发者走过了20多个年头。我第一次接触它是在2015年做代码合并时&#xff0c;当时就被它直观的三栏式对比界面惊艳到了——左右两侧显示对比内容&#xff0c;中间实时标注差…...

OpenClaw学习助手方案:Qwen2.5-VL-7B解析教材插图生成记忆卡片

OpenClaw学习助手方案&#xff1a;Qwen2.5-VL-7B解析教材插图生成记忆卡片 1. 为什么需要AI辅助学习工具 去年备考专业认证时&#xff0c;我发现自己总在重复低效的学习循环——花大量时间手动整理教材图表中的关键数据&#xff0c;再誊写到Anki卡片上。这种机械劳动不仅耗时…...

千问3.5-9B提示词工程:优化OpenClaw任务拆解质量

千问3.5-9B提示词工程&#xff1a;优化OpenClaw任务拆解质量 1. 为什么需要优化提示词 去年冬天第一次用OpenClaw自动整理会议纪要时&#xff0c;我被它的"耿直"气笑了——让它"提取关键结论"&#xff0c;结果给我返回了整段录音的文字版&#xff0c;连&…...

快速验证限流策略:用快马一键生成rate limit exceeded处理原型

快速验证限流策略&#xff1a;用快马一键生成rate limit exceeded处理原型 最近在开发一个需要调用第三方API的项目时&#xff0c;遇到了经典的"rate limit exceeded"问题。作为开发者我们都知道&#xff0c;API调用频率超限是系统设计中必须考虑的场景。传统从零搭…...

FastAPI 2.0 + LLM流式输出全栈方案,含OpenAI兼容层、前端SSE重连策略、服务端背压控制(仅限内部技术白皮书级实录)

第一章&#xff1a;FastAPI 2.0 异步 AI 流式响应教程概览FastAPI 2.0 原生强化了对异步流式响应&#xff08;StreamingResponse&#xff09;的支持&#xff0c;为构建低延迟、高吞吐的 AI 接口&#xff08;如大语言模型推理、语音合成、实时图像生成&#xff09;提供了坚实基础…...

千问3.5-27B知识库应用:OpenClaw变身技术问答助手

千问3.5-27B知识库应用&#xff1a;OpenClaw变身技术问答助手 1. 为什么需要本地化技术问答助手&#xff1f; 去年我在开发一个开源项目时&#xff0c;遇到了一个奇怪的Docker网络问题。当时在Stack Overflow上搜索了半天&#xff0c;找到的答案要么过时&#xff0c;要么不适…...

新手福音:用快马生成你的第一个c盘自动清理python脚本

今天想和大家分享一个特别实用的Python小工具——C盘自动清理脚本。作为一个刚接触编程的新手&#xff0c;我发现清理C盘空间是个常见需求&#xff0c;但手动操作既麻烦又容易误删重要文件。于是我用InsCode(快马)平台生成了一个简单实用的脚本&#xff0c;整个过程特别适合编程…...

2026届必备的五大AI辅助论文助手实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 基于大语言模型与自然语言处理技术的 AI 写作软件&#xff0c;是内容生产领域新兴工具&…...

大厂高薪抢手!文科生如何抓住AI时代机遇,实现职业逆袭?

大厂纷纷高薪招聘文科生&#xff0c;引发社会关注。文科生凭借沟通、叙事、逻辑等优势&#xff0c;在大模型理解人类价值观、企业品牌宣传等方面发挥作用。高校也调整专业设置&#xff0c;培养跨学科人才。文章建议文科生根据自身专业&#xff0c;向文案策划、品牌宣传、法务、…...