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