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

【问题标题】：How to preserve applied filters on browser back button in react js如何在反应js中保留浏览器后退按钮上应用的过滤器
【发布时间】：2018-06-10 14:06:28
【问题描述】：

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

  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) twise。

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

谢谢。

【问题讨论】：

您可以使用 localstorage 保存过滤器值，当用户再次返回同一页面时，从 localstorage 获取保存的值并将它们传递给您正在调用的 api

标签： javascript reactjs react-native react-router react-redux

【解决方案1】：

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

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

第一步：在window.onpopstate中调用getParameters()，并将参数保存在state中。使用上面的 URL，getParameters() 将返回参数作为对象 { 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' }。请注意，它删除了年份，因为它为空。

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 的结果更新状态。还将结果传递给下面的函数以更新您的网址。

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);
  }
}

【讨论】：