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

发布于 2022-09-12 02:36:07 字数 685 浏览 19 评论 0

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你げ笑在眉眼 2022-09-19 02:36:07

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

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

不必在意 2022-09-19 02:36:07

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文