Javascript 表的反应搜索功能

我正在做一个react项目，在其中我使用了table，我需要向它添加一个搜索功能。现在，表中填充了对象

function createData(Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action) {
    return {Estimate, ServiceProvider, Vehicle, Date, Amount, Status, Action};
}
const rows = [
    createData('#10001', "Euro Motors", "2010 Toyota Corolla CE FWD", "January 28, 2021", "$395.11", "Approved",),
    createData('#10002', "Auto Motors", "Some car model", "January 28, 2021", "$395.11", "Pending"),
    createData('#10003', "Some other Motors", "Some other car model", "January 28, 2021", "$395.11", "Approved"),
]
const [tableData, setTableData] = useState(rows)

现在，我有了使用此服务的just ServiceProvider搜索功能

const requestSearch = (searchedVal) => {
    const filteredRows = rows.filter((row) => {
        return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase());
    });
    setTableData(filteredRows);
};

---

但我需要它来评估，服务提供商，车辆。如何将该功能扩展到所有三个键，以便无论用户在搜索栏中搜索什么，它都会重复检查所有三列并过滤掉行。

您可以为所有键编写通用解决方案，而不必单独提及键。 请尝试以下代码段：

const requestSearch = (searchedVal) => {
    const filteredRows = rows.filter((row) => {
        let found = Object.values(row).map(o => o.toLowerCase()).find(o => o.includes(searchedVal));
        if(found) return true; 
        else return false;
    });
    console.log(filteredRows);
};

---

注意：如果您的所有搜索值都是字符串，这将起作用，对于数字，您需要向其添加一些条件处理。

只需添加

估计值

和

车辆

的条件，并在

请求搜索

函数中使用

|

运算符组合它们，如下所示：

return row.ServiceProvider.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Estimate.toLowerCase().includes(searchedVal.toLowerCase()) ||
 row.Vehicle.toLowerCase().includes(searchedVal.toLowerCase())

---

只需在

requestSearch

函数中添加估算和车辆的条件，并使用

|

运算符将它们组合起来。@CharchitKapoor这也会处理重复吗？什么意义上的重复？每行匹配多个条件只会出现一次。@CharchitKapoor您的解决方案很好。你能回答这个问题吗？这样我就可以接受了