react跳转页面redux数据被清除

这篇具有很好参考价值的文章主要介绍了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,然后全局搜了下,发现不止一个地方这么配置了,都给去除了,一个小小的参数引起的问题,记录下,以防再犯文章来源地址https://www.toymoban.com/news/detail-693006.html

到了这里,关于react跳转页面redux数据被清除的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(三十三)——Redux的使用详解

    针对 React 基础巩固(三十二) 中的案例,我们希望抽取页面中共有的代码(例如下方的代码),使用高阶组件统一拦截。 为了让react和redux产生联系,安装一款工具 react-redux 使用 react-redux ,在index.js中统一注入store 新建about.js页面,通过 react-redux 引入store 在App.jsx中引入新的

    2024年02月15日
    浏览(52)
  • 【前端知识】React 基础巩固(三十二)——Redux的三大原则、使用流程及实践

    单一数据源 整个应用程序的state被存储在一颗object tree 中,并且这个object tree 只存储在一个store中; Redux并没有强制让我们不能创建多个Store,但是那样做不利于数据维护; 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改; State是只读的 唯一修改State的方法

    2024年02月15日
    浏览(62)
  • 前端清除页面缓存的方法

    1、meta方法,在head标签里添加代码 Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括pu

    2024年02月08日
    浏览(42)
  • react如何跳转页面?

    可以使用navigate,这个是导航的意思 1、首先、导入navigate 2、声明一个navigate的变量 3、给需要跳转的地方加点击事件 ./home是需要跳到页面的路径 i是我的下标 4、点击跳转事件 url是刚才页面的路径,id是我需要用的 可以换成自己需要的 当然也可以不写

    2024年02月11日
    浏览(42)
  • 清除引入js缓存,vue切换页面重新加载

    require引入的js require.cache删除js缓存

    2024年02月16日
    浏览(49)
  • 前端部署发布项目后,如何通知用户刷新页面、清除缓存

    以下只是一些思路,有更好的实现方式可以留言一起交流学习 方式一:纯前端 在每次发布前端时,使用webpack构建命令生成一个json文件,json中写个随机生成的一个字符串(比如时间戳),每次打包程序都会自动更新这个json文件。 在项目中,通过定时任务或者在切换页面路由

    2024年02月05日
    浏览(55)
  • React+Redux 数据存储持久化

    yarn add @reduxjs/toolkit redux react-redux redux-persist 默认已经模块化了reducers,如下图所示 数据持续化存储github redux-persist redux工具 redux RTK redux官网 redux

    2024年02月16日
    浏览(56)
  • react中使用redux,但是通过useEffect监听不到redux中的数据变化?

    在React中使用Redux并通过useEffect监听Redux中的数据变化时,需要使用 react-redux 库中的 useSelector 钩子来选择需要监听的Redux状态。 useSelector 函数允许您从Redux存储中选择和获取特定的状态。 以下是一种在React组件中使用Redux,并通过useEffect监听Redux中的数据变化的常见方法: 首先

    2024年02月16日
    浏览(50)
  • 前端页面导航跳转方式

    1、声明式导航: 使用router-link方式实现的导航、router-link选中的标签会添加class样式 方式一:不带参数 方式二:带参数并且参数通过地址栏显现,整种方式可以拥有二级路由,path+query为一组 方式三:带参数,参数不显示name+params为一组,在定义routes时,需要给组件添加name

    2024年02月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包