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

Posted 2023-02-22

【中文标题】反应数组中的计数对象属性

【英文标题】：react count object properties in an array

【发布时间】：2017-11-24 03:04:34

【问题描述】：

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

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

【参考方案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
  
]

【讨论】：

在这段代码中，数据参数是我的电影数组吗？所以我不需要地图功能吗？

是的，data 是您在问题中发布的数组。我已经编辑了答案。

谢谢伙计。我只是像这样解决它： const countTypes = this.props.movi​​es.filter(movie => movie.media_type === type); const movieCounted = countTypes.length;

【参考方案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> 
    );

【讨论】：

道具更新后会中断。 “this.props.movi​​es.filter 不是函数”。知道如何绕过它吗？

您是如何准确调用该函数的？似乎您错过了绑定或者您没有正确传递道具。 （可能道具名称写错了）

【参考方案3】：

var data = [
     original_name: "쌈 마이웨이", id: 70813, media_type: "tv", name: "Fight My Way", vote_count: 5 ,

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

     vote_average: 6.1, vote_count: 215, id: 345922, video: false, media_type: "movie" ,

     original_name: "Fight", id: 46554, media_type: "tv", name: "Fight", vote_count: 0, vote_average: 0 ,

     original_name: "The Good Fight", id: 69158, media_type: "tv", name: "The Good Fight", vote_count: 22 ,

     vote_average: 0, vote_count: 0, id: 158301, video: false, media_type: "movie", title: "Fight" ,
]

this.types = ;

data.forEach((d) => 
    if (!this.types[d["media_type"]]) 
        this.types[d["media_type"]] = 1;
     else 
        this.types[d["media_type"]] += 1;
    
)

console.log(this.types);
// you will get answer  tv: 3, movie: 3 

【参考方案4】：

这是一种可能的方法：

render()  
    let countTypes = ' '
         return (
             list.length > 0
                 ?
                  <span> countTypes = (list.filter(moviesFilter => 
                  moviesFilter.type.id === this.props.typeId)).length 
                  </span>
                :
                  <DisplayMessage message="0" />
        )