Javascript 在React上过滤json

我必须通过两种方式过滤这个数组，一种是当用户键入时，另一种是当他单击某个类别时，我的代码如下：

import React，{Component}来自“React”；
导入“/App.css”；
从“./apps.json”导入appslist；
从“./组件/侧边栏/侧边栏”导入侧边栏；
从“./components/HeaderSearch/HeaderSearch”导入HeaderSearch；
从“./components/ListContainer/ListContainer”导入ListContainer；
从“./组件/分页/分页”导入分页；
类应用程序扩展组件{
状态={
列表：appslist，
搜索字段：“”，
所选类别：“”，
当前页面：1，
企业名称：3
};
onSearchChange=事件=>{
this.setState（{searchfield:event.target.value}）；
};
onClickCategory=事件=>{
this.setState（{selectedcategory:event.target.id}）；
};
render（）{
常数{
列表
searchfield，
当前页，
信息技术公司，
选定类别
}=本州；
让过滤器列出；
filteredList=list.filter（list=>{
return list.name.toLowerCase（）.includes（searchfield.toLowerCase（））；
});
filteredList=list.filter（list=>{
返回列表。类别[0]。toLowerCase（）。包括（selectedcategory.toLowerCase（））；
});
返回(
);
}
}
导出默认应用程序；

我在那里保留了两个

filteredList

，但只有最后一个可以工作

---

如何使两个过滤器同时工作？

您可以链接过滤器：

filteredList = list
    .filter(list => list.name.toLowerCase().includes(searchfield.toLowerCase()))
    .filter(list => list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase()));

甚至可以将其作为单个筛选器编写：

filteredList = list.filter(
    list => list.name.toLowerCase().includes(searchfield.toLowerCase()) &&
            list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase())
);

如果您需要OR行为而不是AND，那么使用单过滤器方法，显然用

|

替换

&&

关于评论中的问题：

要使用过滤器中的所有类别，您可以使用

部分

或

每个

（取决于所需的逻辑）：

---

必须尝试使用

|

操作符来测试它，比如

返回条件1 | |条件2

？您的

应用程序列表是什么样子的？正如您所看到的，我只过滤列表的第一个元素。类别，如何传递列表上的所有元素？它有1个、2个或3个元素，如：“类别”：[“语音分析”、“报告”、“优化”]，它使用的是链式过滤器，但似乎如果我使用一些，列表上什么都没有出现。我不确定您的结构，可能是我误解了什么是什么。但我想你现在有知识自己解决它了。
filteredList = list.filter(
    list => list.name.toLowerCase().includes(searchfield.toLowerCase()) &&
            list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase())
);

filteredList = list.filter(
    list => list.name.toLowerCase().includes(searchfield.toLowerCase()) &&
            list.categories.some(
                cat => cat.toLowerCase() === selectedcategory.toLowerCase()
            )
);