在数组中反应计数对象属性

Question

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

    [
    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 call 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 文档和论坛中的这些东西。不仅仅是反应。但我什么也做不了。我知道这很简单。

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

Answer 1

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

const movies = data.filter(item => item.media_type === 'movie')),
  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
  }
]

Answer 2

好吧，我找到了解决办法。感谢 poohitan 的回答。我通过他的回答解决了这个问题。

countType(type) {
        const countTypes = this.props.movies.filter(movie => movie.media_type === type);
        return countTypes.length;
    }

当我渲染电视结果时，我只是用 type 调用上面的方法。例如：

return ( 
    <div> 
      movie count: {this.countType('movie')} 
      tv show count: {this.countType('tv')} 
    </div> 
    );