Javascript 删除查询参数

Javascript 删除查询参数,javascript,reactjs,Javascript,Reactjs,我有一个复杂的多选过滤器页面,所以我将过滤器分组如下http://localhost:3000/search?id[]=101404&id[]=7267261。我正在使用URLSearchParams()管理我的URL 唯一不起作用的是在取消选中参数后删除它。我尝试使用URLSearchParams.delete(),但它只接受一个参数name。如果我传递id[],它将删除所有id[],而不仅仅是我要删除的id 编辑:根据建议,我有了这个新代码(见下面的旧代码)。希望有人有一个更优雅的解决方案

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

唯一不起作用的是在取消选中参数后删除它。我尝试使用
URLSearchParams.delete()
,但它只接受一个参数name。如果我传递id[],它将删除所有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,但无论如何我都无法让它工作。我的参数是编码的,所以像这样的东西不应该工作吗?我甚至不能让它在控制台中工作。。。
“id%5B%5D=101404&id%5B%5D=7267261”。替换(/\%5\%D/,”)
“id%5B%5D=101404&id%5B%5D=7267261”。替换(/%5%D/,”)
“id%5B%5D=101404&id%5B%5D=7267261”。替换(/\[\]/,”)

这些都不管用。下面是生成查询参数的代码

  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()
    });
  }
如果您使用,迭代结果和您想要的结果会怎么样


虽然这不是一个优雅的解决方案,但我认为它仍然比regex方法好。

它们都需要称为id[]吗?或者您可以将一个重命名为id[1]?id[1]=实际上会使服务器崩溃,因此无法正常工作=/如果没有方括号,id1如何?或者它们是必需的?使用格式
http://localhost:3000/search?id[]=101404&id[]=7267261
或者,
id=[id,id]
服务器将它们作为数组处理`参数:{“id”=>["101404", "7267261"]}`这样我就可以循环遍历它们,而不必为每个单独的参数创建一个数据库查询这是一个非常不优雅的解决方案……但它工作得很好,所以我不能抱怨。我必须循环遍历所有的值,过滤掉未选出的值,然后迭代过滤列表并附加每个bac我很高兴它能为你工作。相信我,这个解决方案比正则表达式更清晰,更易于维护。作为一个经常使用正则表达式的经验丰富的Perl开发人员,我告诉你这一点。
 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()
    });
  }