我有一个解决方案,可以过滤项目标签。已更新,因此书籍可以接收多个标签并添加了标签数组:
const bookListBefore = [
{ id: 1, tag: 'Fysik' },
{ id: 2, tag: 'Marketing' },
{ id: 3, tag: '' },
];
const bookListNow = [
{ id: 1, tag: ['Fysik', 'Matematik'] },
{ id: 2, tag: ['Analytics', 'Marketing', 'Data'] },
{ id: 3, tag: [''] },
];
现在,我正在努力寻找一种解决方案来过滤那些具有特定标签的项目。在使用单个标签之前,我可以使用此解决方案执行过滤器并显示带有特定标签的项目:
const filteredList = bookList
.filter(item => (item.title.toLowerCase().includes(searchTextHome)
|| item.author.toLowerCase().includes(searchTextHome))
&& (selectedTags.length > 0 ? selectedTags.includes(item.tag) : true));
<section className={stylesSCSS.bookContainer}>
{filteredList.length === 0 ? emptyPlaceholder()
: filteredList.map(item => (
<BookItem
cover={item.cover}
item={item}
userTagData={userTagData}
onTagSelected={onTagSelected}
/>
))
}
</section>
“搜索”过滤bookList的第一部分是关于输入搜索字段的,但是第二部分(selectedTags.length > 0 ? selectedTags.includes(item.tag) : true)
是我无法过滤标签数组的地方,并且不知道如何使用标签扩展运算符或数组函数以过滤标签数组。有什么想法吗?
答案 0 :(得分:1)
您正在将数组传递给includes
。 includes
接受两个参数,第一个是要检查的值,第二个是数组中的位置(可选)
[1,2,3].includes(1) //true
[1,2,3].includes(1,3) //false
您需要一次检查tag
中的每个元素
const { tag } = book
for(let item of tag){
if(list.includes(item)) return true
}
return false
您的代码应如下所示
const filteredList = bookList.filter(item =>
(item.title.toLowerCase().includes(searchTextHome)
|| item.author.toLowerCase().includes(searchTextHome))
const result = selectedTags.length > 0 ? filteredList.filter(x =>{
const { tag } = x
for(let item of tag) {
if(selectedTags.includes(item)) return true
}
return false
}) : filteredList
答案 1 :(得分:1)
我认为它将与数组函数some
selectedTags.length > 0 ? selectedTags.some(st => item.tag.includes(st)) : true
使用此标记,至少一个选定的标签应与书本标签列表匹配,并显示出来。