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

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

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

【问题讨论】：

标签： javascript arrays reactjs javascript-objects

【解决方案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.movies.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.movies.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" />
        })
}

【讨论】：