react跳转页面redux数据被清除

最新推荐文章于 2024-02-01 11:25:53 发布

璐瑶知码li

最新推荐文章于 2024-02-01 11:25:53 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端

本文链接：https://blog.csdn.net/qq_49464155/article/details/132601473

文章讲述了作者在处理React组件与Redux状态管理时遇到的问题，即页面跳转导致组件卸载时Redux数据丢失。通过分析发现，设置a标签的href为#会触发组件重新渲染并清空数据。最终解决方案是移除href属性，避免数据意外丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键代码如下，页面中有根据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，然后全局搜了下，发现不止一个地方这么配置了，都给去除了，一个小小的参数引起的问题，记录下，以防再犯