3

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

2 回答 2

2

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

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

于 2018-06-12T16:34:43.020 回答
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()
    });
  }
于 2018-06-13T07:51:15.803 回答