删除查询参数

时间:2018-06-12 16:22:30

标签: javascript reactjs

我有一个复杂的多选过滤器页面,所以我将这个过滤器分组为http://localhost:3000/search?id[]=101404&id[]=7267261。我正在使用URLSearchParams()来管理我的网址。

唯一不起作用的是在取消选中后删除参数。我尝试使用URLSearchParams.delete(),但它只接受一个参数name。如果我传递id [],它将删除所有id [],而不仅仅是我想删除的那个。

编辑:根据建议,我有这个新代码(参见下面的旧代码)。希望有人有一个更优雅的解决方案。

 setQueryParams = (param = null, value = null, category = null) => {
    ....

      // parameter exists but value is false
    } else if (param && !value) {
        // find all values for category and filter out unchecked value
        const values = params.getAll(`${category}[]`).filter(category => category !== param)
        // remove entire category from URLSearchParams
        params.delete(`${category}[]`)
        // loop over filtered list and append them BACK to URLSearchParams
        values.forEach((value) => {
          params.append(`${category}[]`, value)
        });
    }

    this.setState({
      query: params.toString()
    });
  }

我能想到的唯一另一种方法是编写一些Regexp,无论如何我都无法使它工作。我的params是编码的,所以不应该这样的工作吗?我甚至无法让它在控制台中工作...... "id%5B%5D=101404&id%5B%5D=7267261".replace(/\%5\%D/,'') "id%5B%5D=101404&id%5B%5D=7267261".replace(/%5%D/,'') "id%5B%5D=101404&id%5B%5D=7267261".replace(/\[\]/,'')

这些都不起作用。这是我生成查询参数的代码。

  setQueryParams = (param = null, value = null, category = null) => {
    const query = this.state.query;
    // get current location
    const location = this.props.location.search;

    // Set params based on whether component mount or filter change
    const params = param ? new URLSearchParams(query) : new URLSearchParams(location);

    // value must be equal to true
    if (param && value) {
      params.append(`${category}[]`, param);

      // parameter exists but value is false
    } else if (param && !value) {
      params.delete(category);
    }

    this.setState({
      query: params.toString()
    });
  }

2 个答案:

答案 0 :(得分:2)

如果您使用getAll('id[]'),迭代结果和append()您想要的结果,该怎么办?

虽然它不是一个优雅的解决方案,但我认为它仍然比正则表达式更好。

答案 1 :(得分:0)

 setQueryParams = (param = null, value = null, category = null) => {
    ....

      // parameter exists but value is false
    } else if (param && !value) {
        // find all values for category and filter out unchecked value
        const values = params.getAll(`${category}[]`).filter(category => category !== param)
        // remove entire category from URLSearchParams
        params.delete(`${category}[]`)
        // loop over filtered list and append them BACK to URLSearchParams
        values.forEach((value) => {
          params.append(`${category}[]`, value)
        });
    }

    this.setState({
      query: params.toString()
    });
  }