Question

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

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

但是，我一直在努力弄清楚如何检查新数组中的重复项，并且如果存在的话就不要推送新值。

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)

更好的方法：

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

    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)

Answer 2

可以使用filter实现。根据每个问题，

let filteredData = this.props.mediaLibrary.filter(file => file.category !== categoryArray);

按类别名称过滤数组

2 个答案: