javascript - react 数组中的计数对象属性

Question

我正在通过 API 获取数据。它是一个电影、电视节目、人物数据库。当我在搜索框中搜索一个词时，它会返回嵌套在数组中的对象中的相关电影、电视节目和人名。例如，当我搜索“fight”时:

    [
    0:{original_name: "쌈 마이웨이", id: 70813, media_type: "tv", name: "Fight My Way", vote_count: 5,…}

    1:{vote_average: 8.2, vote_count: 8057, id: 550, video: false, media_type: "movie", title: "Fight Club",…}

    2:{vote_average: 6.1, vote_count: 215, id: 345922, video: false, media_type: "movie",…}

    3:{original_name: "Fight", id: 46554, media_type: "tv", name: "Fight", vote_count: 0, vote_average: 0,…}

    4:{original_name: "The Good Fight", id: 69158, media_type: "tv", name: "The Good Fight", vote_count: 22,…}

    5:{vote_average: 0, vote_count: 0, id: 158301, video: false, media_type: "movie", title: "Fight",…}
   ]

还有更多的结果，但我删掉了它们。如您所见，每个对象中都有 media_type 属性。您可以理解 3 种媒体类型(电影、电视、人物)。我想计算每种类型。

实际上；我想我想要链接中的相同内容:React: Syntax for calling setState in Switch Return

但这对我不起作用。我试图像这样简单地将 movieCount 的状态更改为 3:

countType() {
        this.props.movies.map(movie => {
            return() => {
            if(movie.media_type === 'movie') {
                this.setState({ movieCount: 3});
                console.log(this.state);
            }
            }
        });
    }

但它也不起作用。我在互联网上的 javascript 文档和论坛中研究了这些东西。不仅仅是 react 。但我无能为力。我知道这很简单。

那么如何根据对象的属性类型对数组中的对象进行计数呢？

Answer 1

假设您从 API 获取的数据存储在 data 变量中，您可以尝试使用以下代码来查找数据数组中 movie 媒体类型的计数:

const movies = data.filter(item => item.media_type === 'movie'));
const moviesCount = movies.length;

您还可以动态计算数据数组中每个 media_type 的计数:

const mediaTypes = data
    .map(dataItem => dataItem.media_type) // get all media types
    .filter((mediaType, index, array) => array.indexOf(mediaType) === index); // filter out duplicates
  
const counts = mediaTypes
  .map(mediaType => ({
    type: mediaType,
    count: data.filter(item => item.media_type === mediaType).length
  }));

然后 counts 将是这样的:

[
  {
    "type": "tv",
    "count": 3
  },
  {
    "type": "movie",
    "count": 3
  }
]