Question

我有一个解决方案，可以过滤项目标签。已更新，因此书籍可以接收多个标签并添加了标签数组：

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)是我无法过滤标签数组的地方，并且不知道如何使用标签扩展运算符或数组函数以过滤标签数组。有什么想法吗？

Answer 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

Answer 2

我认为它将与数组函数some

一起使用

selectedTags.length > 0 ? selectedTags.some(st => item.tag.includes(st)) : true

使用此标记，至少一个选定的标签应与书本标签列表匹配，并显示出来。

从数组内部过滤值

2 个答案: