javascript - 按类别名称过滤数组

Question

我想根据图像的类别属性过滤图像数组。

我能够将所有图像的类别属性映射并推送到新数组中，并将状态设置为新数组。

但是，我一直在思考如何检查新数组中的重复项，并且如果新值已经存在，则不推送新值。

interface Asset {
  id: string
  name: string
  category: string
} 

import * as React from "react"

interface MediaLibraryProps {
  mediaLibrary: Asset[]
}

class MediaLibrary extends React.Component<MediaLibraryProps> {
  state = {
    categories: [],
  }

categoryFilter = () => {
    const categoryArray: any = []
    this.props.mediaLibrary.filter(file => {
      if (file.category !== categoryArray) {
        categoryArray.push(file.category)
      } else {
        return
      }
    })
    this.setState({
      categories: categoryArray
    })
    console.log(this.state.categories)
  }
render() {
    const select = this.state.categories.map(category =>
      <option key={category}>{category}</option>
    )
return (
      <div>
        <select>
          { select }
        </select>
        <button onClick={this.categoryFilter}>LOG</button>
      </div>
    )
  }
}

export default MediaLibrary

我期望仅将唯一名称推送到 categories 数组中。

实际结果 - 一切都在插入。

Answer 1

参见Remove duplicate values from JS array

示例:

uniqueArray = a.filter(function(item, pos) {
    return a.indexOf(item) == pos;
})

快速回答您的问题:

    const categoryArray: any = []
    this.props.mediaLibrary.filter(file => {
      if (categoryArray.indexOf(file.category) < 0) {
        categoryArray.push(file.category)
      } else {
        return
      }
    })
    this.setState({
      categories: categoryArray
    })
    console.log(this.state.categories)

更好的方法:

这里的过滤器是不必要的。更好的方法是使用 map 。

    const categoryArray: any = []
    this.props.mediaLibrary.map(file => {
      if (categoryArray.indexOf(file.category) < 0) {
        categoryArray.push(file.category)
      }
    })
    this.setState({
      categories: categoryArray
    })
    console.log(this.state.categories)