Question

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

  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。

请在现有解决方案中提出一些新的解决方案或修改。

感谢。

Answer 1

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

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

步骤1：在getParameters()中调用window.onpopstate并将参数存储在状态中。使用上面的网址，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);
  }
}

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

1 个答案: