因此,我正在使用来自API的数据在React中构建基本方面搜索,但我正在努力添加和删除发送回服务器的有效负载中的值。有效负载对象可以包含数组,对象和字符串。所以说我有一个如下所示的有效载荷结构:
payload = {
search_query: ""
topic: [],
genre: [],
rating: "",
type: {}
}
使用deepmerge我能够将多个值传递回工作正常的API,因此示例有效负载将是......
payload = {
search_query: "Luther"
topic: ["9832748273", "4823794872394"],
genre: ["3827487483", "3287483274873"],
rating: "18",
type: {
args: {
when: "today",
min: 15
},
name: "spot"
}
}
到目前为止一切顺利,我得到了预期的结果。现在我在facet上进行切换以将其从有效负载中移除,有效负载将值发送回函数以从有效负载中移除。例如:
清除搜索,删除值=“Luther”
切换主题,删除值=“9832748273”
切换类型,删除值=“3827487483”
切换评级,删除值=“18”
切换类型,要删除的值= { args: { when: "today", min: 15}, name: "spot"}
搜索和评级将返回空字符串,主题和流派将从数组中删除项目,类型将返回一个空对象。
这适用于删除数组值,但感觉很脏,我想要一个干净的方式来处理所有类型!
const removeObjValue = (obj, filterValue) => {
Object.entries(obj).forEach(([key, value]) => {
Object.entries(value).forEach(([subKey, subValue]) => {
if(subvalue === filterValue) {
if(Array.isArray(value)) {
const index = value.indexOf(subvalue);
if (index > -1) {
value.splice(index, 1);
}
}
}
});
});
return obj;
}
我只是使用delete
关键字来删除对象属性,就像这样
if (payload[key]) {
if (payload[key] instanceof Array) {
var idx = payload[key].indexOf(value);
if (idx > -1) payload[key].splice(idx, 1);
} else {
delete payload[key];
}
}