我有很多輸入，之后我的物件應該過濾，我可以對其進行硬編碼，但可能有更聰明的方法來做到這一點
過濾狀態：
const [filters, setFilters] = useState<FiltersType>({
login: "",
name: "",
surrname: "",
});
示例資料：
const data: UserRow[] = [
{
key: "1",
login: "[email protected]",
name: "John",
surrname: "Smith",
role: ["user"],
},
{
key: "2",
login: "[email protected]",
name: "Andrew",
surrname: "Johnson",
role: ["user"],
},
];
data.filter((e) => {
if (
(!filters.name || e.name.includes(filters.name)) &&
(!filters.surrname || e.surrname.includes(filters.surrname)) &&
(!e.login ||
e.login.toLowerCase().includes(filters.login.toLowerCase()))
) {
return true;
}
return false;
})
例如，可以這樣做，但正如您所見，添加新欄位時它看起來很糟糕并且擴展性很差，我嘗試使用“Object.entries()”來簡化它，但最終失敗了:(。什么是最好的此類問題的模式？
uj5u.com熱心網友回復：
您應該將some()(logical ORfor all the conditions) 或every()(logical ANDfor all the conditions) 與filter().
const data = [
{
key: "1",
login: "[email protected]",
name: "John",
surrname: "Smith",
role: ["user"],
},
{
key: "2",
login: "[email protected]",
name: "Andrew",
surrname: "Johnson",
role: ["user"],
},
];
const filter = {
login: "",
name: "",
surrname: "",
};
const filters = Object.entries(filter);
const filtered = data.filter((user) =>
filters.some(
([key, value]) =>
user[key] && user[key].toString().toLowerCase().includes(value)
)
);
console.log(filtered);如果some()您想在滿足任何過濾條件時包含結果，請使用every()，如果您只想在滿足所有過濾條件時包含結果，請使用。
以上將適用于簡單的過濾器。但是，您可以使用
typeof()或Array.isArray()函式等擴展解決方案，以相應地處理不同的型別，如陣列、嵌套物件等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/530699.html
上一篇：無法添加邊距權以回應mui表