react管理系统如何更好的保存回显查询数据
基于And pro开发的管理系统,大部分都是如下这种页面,上面一个查询表单,下面是一个查询出来的table数据。点击table每一条数据可以进入详情页面。
刚进入页面时候在componentDidMount里dispatch了一个action去查询默认数据,默认选中了两个参数
现在有个需求:
从上面的表单中选择/填入参数然后点击搜索请求接口,请求过来的数据用下面的table展示出来。然后点击某一条数据进入详情页。再从详情页回到这个查询页面的时候需要显示刚刚查询出来的数据,而不是显示默认数据
我现在是这么做的:
每次输入或者选择完参数之后都会去派发一个action调接口,在这个过程中我把查询参数保存到store中,然后从详情页面回到查询页面时,在componentDidMount里判断一下props中有没有保存过的查询参数。有的话就用这个保存的参数去请求接口,如果没有保存还是用默认参数请求。
但是这样做的话有不少问题,比如说每个这种查询页面都需要保存参数到state,然后跳转页面的时候还得清空这些参数。还有就是table分页排序的时候都需要保存参数,各种问题很麻烦。我们领导跟我说用不着这么麻烦。按照以前十多年前用jquery的方式做就很简单,就是控制元素显示隐藏就可以,但是我实在不明白这种做法,不知道怎么个简单法,好久不写jq
不知道大家有没有思路。。。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
状态提升.
页码数据不要存本地,存redux.
不想改redux就存session.
进入页面先检查session有没有历史查询条件,有就取出来.
有用hook的话,可以封装下.
将筛选的数据放在地址栏,比如: path?name=a&age=18等等这样。然后点入详情在退回来的时候在根据页面的url初始化state,然后在请求数据。。这样还有一个好处就是,你可以把url发给其他,这样其他人可以看到你的相关筛选。