在我的react应用程序中,我负责发送多个GET请求,有时还会附加一些可选的过滤器参数。另外,我将参数存储在我的redux存储中,以便它们能够在后续请求中堆叠。这是问题所在:有时我会清除参数的值,但是由于它们的键仍保存在我的商店中,因此我会收到如下请求:
/restaurants/?search=&state_id=2
注意search
参数值如何为空(如预期)。我想知道消除这些缠绵参数的最佳方法是什么?我研究了lodash的_.omitBy
与_.isEmpty
的组合,但这在处理诸如分页之类的数值时会产生某种误报。
_.omitBy(params, ._isEmpty);
我认为不需要通过react / redux提供 how 的确切参数,但是很乐意提供帮助。
注意:我正在使用axios,并将我的params作为对象而不是字符串来传递:
axios.get('restaurants', {
params
});
答案 0 :(得分:0)
您可能需要手动解析。在&
上进行拆分,然后在=
上进行拆分,并检查是否存在基于拆分长度的值-从那里相应地删除。如果您对正则表达式感到满意,则可以检查=
之后是否存在值而不是拆分。
答案 1 :(得分:0)
这个解决方案有点粗糙,但是可以用。假设您的查询参数存储在Map中,例如:
const params = {
foo: 'bar',
bang: 0,
buzz: '' // this value has been removed from your store
}
您可以从参数映射中创建键数组,过滤掉没有值的项,然后将它们重新组合在一起作为查询参数。
const queryString = Object.keys(params).map(filter => {
if (params[filter] || Number.isInteger(params[filter])) {
return `${filter}=${params[filter]}`;
}
return null;
}).filter(item => item).join('&');
这将导致foo=bar&bang=0
答案 2 :(得分:0)
考虑到参数存储在一个对象中(如您在最近的编辑中提到的那样),您可以删除包含空字符串的属性:
const params = {
search: "",
state_id: 2
};
for (const key of Object.keys(params)) {
if (params[key] === "") {
delete params[key];
}
}
console.info(params);
此替代方法的优点是简短易维护。
但是对于那些包含已序列化所有参数的字符串的字符串,使用正则表达式很容易做到:
function removeEmptyParams(query) {
return query.replace(/[^=&]+=(?:&|$)/g, "");
}
const testQuery = "f=1&search=&state_id=2&foo=&bar=12";
console.info(removeEmptyParams(testQuery));
也非常简单且易于维护。
答案 3 :(得分:0)
最好和最简单的方法是在每个可选参数上使用扩展对象文字, 像这样
params:{
...( CONDITION && {param_key: param_value}),
...( this.state_id != null && {state_id: this.state_id})
}
如果条件为真,封装的键值对将被解包,如果条件为假,将没有空值或键。