javascript - 删除查询参数

Question

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

唯一不起作用的是删除一个参数，一旦它被取消选中。我尝试使用 URLSearchParams.delete()，但它只接受一个参数，名称。如果我传递 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()
    });
  }

我能想到的唯一其他方法是编写一些正则表达式，但无论如何我都无法让它工作。我的参数是编码的，所以这样的东西不应该工作吗？我什至无法让它在控制台中工作......"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()
    });
  }

Answer 1

如果你使用 getAll('id[]') 会怎么样？ , 迭代结果和 append()你想要的那些。

虽然它不是那么优雅的解决方案，但我认为它仍然比正则表达式方法更好。