问答

react管理系统如何更好的保存回显查询数据

作者:admin 2021-08-20 我要评论

基于And pro开发的管理系统,大部分都是如下这种页面,上面一个查询表单,下面是一个查询出来的table数据。点击table每一条数据可以进入详情页面。 刚进入页面时...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

基于And pro开发的管理系统,大部分都是如下这种页面,上面一个查询表单,下面是一个查询出来的table数据。点击table每一条数据可以进入详情页面。
image.png
刚进入页面时候在componentDidMount里dispatch了一个action去查询默认数据,默认选中了两个参数

现在有个需求:
从上面的表单中选择/填入参数然后点击搜索请求接口,请求过来的数据用下面的table展示出来。然后点击某一条数据进入详情页。再从详情页回到这个查询页面的时候需要显示刚刚查询出来的数据,而不是显示默认数据

我现在是这么做的:
每次输入或者选择完参数之后都会去派发一个action调接口,在这个过程中我把查询参数保存到store中,然后从详情页面回到查询页面时,在componentDidMount里判断一下props中有没有保存过的查询参数。有的话就用这个保存的参数去请求接口,如果没有保存还是用默认参数请求。
但是这样做的话有不少问题,比如说每个这种查询页面都需要保存参数到state,然后跳转页面的时候还得清空这些参数。还有就是table分页排序的时候都需要保存参数,各种问题很麻烦。我们领导跟我说用不着这么麻烦。按照以前十多年前用jquery的方式做就很简单,就是控制元素显示隐藏就可以,但是我实在不明白这种做法,不知道怎么个简单法,好久不写jq
不知道大家有没有思路。。。

###

状态提升.
页码数据不要存本地,存redux.

不想改redux就存session.
进入页面先检查session有没有历史查询条件,有就取出来.
有用hook的话,可以封装下.

###

将筛选的数据放在地址栏,比如: path?name=a&age=18等等这样。然后点入详情在退回来的时候在根据页面的url初始化state,然后在请求数据。。这样还有一个好处就是,你可以把url发给其他,这样其他人可以看到你的相关筛选。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 使用箭头函数return数据不能实现

    使用箭头函数return数据不能实现

  • 个人小程序号能接入小程序3D地图吗?

    个人小程序号能接入小程序3D地图吗?

  • vue 移动端项目中,使用了better-scrol

    vue 移动端项目中,使用了better-scrol

  • css如何做出区域平均划分为四列

    css如何做出区域平均划分为四列

腾讯云代理商
海外云服务器