在 reactjs 中正确过滤其他数组中的数组

Question

您好，我是第一次尝试反应，我的过滤功能遇到了一些问题。 代码如下：

所以这是我在组件中的渲染方法：

const categoryFilter = this.state.appItems.filter(item =>
item.categories.filter(str => {
return str.includes(active);
})
);
const appList = categoryFilter.map(appItem => (
<AppItem appItem={appItem} key={appItem.id}></AppItem>
));
return (
<React.Fragment>
<div className="flex-container">
<NavCategories
categories={this.state.categories}
onClick={this.handleClick}
active={active}
/>
<section className="apps-list">
<header>
<input type="text" placeholder="Search by App" />
</header>
<ul>{appList}</ul>
</section>
</div>
</React.Fragment>
);

this.state.appItems 是一个来自 json 文件的数组，这里有一个片段：

[ {
"id": "12312",
"name": "Test",
"description": "test.",
"categories": ["Voice", "Delivery", "Optimization"],
"subscriptions": [
{
"name": "Trial",
"price": 0
},
{
"name": "Professional",
"price": 3500
}
]
},]

活动是一个字符串，用于管理另一个组件上的活动类项。

所有内容都会正确呈现，但即使活动状态每次都在更改，也永远不会对其进行筛选。我已经尝试了多种方法，但是这种过滤器方法让我感到非常困惑，因为我想过滤另一个数组内的数组，并想要过滤整个 AppItem 数组。

如果有人能解释/给我一些提示，我会喜欢它。提前致谢:)

Answer 1

Array.filter()返回一个新数组，其中包含过滤后的元素。因此，您的内部过滤器将始终返回一个至少包含零个元素的数组，该数组的计算结果为真实值，并且您的外部过滤器将只包含原始数组中的每个元素。

只需将内部过滤器切换为Array.includes()，它将返回 true 或 false。

const categoryFilter = this.state.appItems.filter(item =>
item.categories.includes(active)
);