如何在react js中保留浏览器后退按钮上应用的过滤器

本文介绍了如何在react js中保留浏览器后退按钮上应用的过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在我的应用程序中，所有列表页面上都有过滤器.现在根据要求，我想在浏览器后退按钮上保留应用的过滤器.例如，假设用户在销售列表页面上应用了过滤器.之后，他点击一条记录进入销售编辑页面.现在，如果用户点击浏览器后退按钮，那么那些应用的过滤器应该保留.为了做到这一点，我喜欢下面.在销售列表页面，

In my application, there are filters on all list pages. Now as per requirement, I want to preserve applied filters on browser back button. E.g say user has applied filters on sales list page. After that he clicks on one record to go to sales edit page. Now if user hit browser back button then those applied filters should remain. To accomplish this i did like below. On sales list page ,

componentWillMount() { const { list, checkReportClose, updateReportCloseStatus } = this.props; const { inPopState } = this.state; window.onpopstate = () => { if (!_.isEmpty(list)) { this.setState({ filters: JSON.parse(list.input.filters), inPopState: true}, this.loadList); } } if(!inPopState && inPopState != undefined && checkReportClose == false) { this.loadList(); } }

使用上面的代码可以正常工作，但是当返回按钮时它会调用 lis 页面 api (this.loadList).

Using above code it works fine but while back button it calls the lis page api (this.loadList) twise.

请提出一些新的解决方案或对现有解决方案进行修改.

Please suggest some new solution or modification in existing one.

谢谢.

推荐答案

我建议使用 url 将过滤器存储为参数.

I would suggest using the url to store filters as parameters.

我在下面写了一个例子.让我们使用 skylerfenn/news?order=asc&category=feature&year=2017 作为以下函数的 url.

I've written an example below. Let's use skylerfenn/news?order=asc&category=feature&year=2017 as the url for the functions below.

第一步:在window.onpopstate中调用getParameters()，并将参数保存在state中.使用上面的 URL，getParameters() 将返回参数作为对象 { order: 'asc', category: 'feature', year: '2017' }.

Step 1: Call getParameters() in the window.onpopstate and store the parameters in state. Using the URL above, getParameters() will return the parameters as the object { order: 'asc', category: 'feature', year: '2017' }.

function getParameters() { let parameters = window.location.search.replace('?', ''); let currentParameters = {}; if (Object.keys(parameters).length) { parameters = parameters.split('&'); for (let i = 0; i < parameters.length; i++) { let parameter = parameters[i].split('='); currentParameters[parameter[0]] = parameter[1]; } } return currentParameters; }

第 2 步:将任何新参数作为对象传递给下面的 getNewParameters 函数.例如，调用 getNewParameters({ order: 'desc', year: null }) 返回对象 { order: 'desc', category: 'feature' }.请注意，它删除了年份，因为它为空.

Step 2: Pass any new parameters to the getNewParameters function below as an object. For example, calling getNewParameters({ order: 'desc', year: null }) returns the object { order: 'desc', category: 'feature' }. Notice that it removes year since it's null.

function getNewParameters(newParameters) { const parameters = getParameters(); const keys = Object.keys(newParameters); for (let i = 0; i < keys.length; i++) { const value = newParameters[keys[i]]; parameters[keys[i]] = value; if (!value) { delete parameters[keys[i]]; } } return parameters; }

第 3 步:使用 getNewParameters 的结果更新状态.还将结果传递给下面的函数以更新您的网址.

Step 3: Use the result from getNewParameters to update state. Also pass the result to function below to update your url.

updateUrl(parameters) { let search = ''; let j = 0; let separator = '?'; Object.keys(parameters).forEach((key) => { let value = parameters[key]; if (value) { if (j !== 0) { separator = '&'; } search += `${separator}${key}=${value}`; j++; } }); let newUrl = `${location.origin}${location.pathname}${search}`; // prevents pushing same url if function won't change url. if (location.href !== newUrl) { history.pushState(null, null, newUrl); } }