Question

我有一个复杂的多选过滤器页面，所以我将这个过滤器分组为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()
    });
  }

Answer 1

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

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

Answer 2

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

删除查询参数

2 个答案: