オブジェクト（JS、React）の値をカウントするよりスマートな方法

Question

以下のコードを見て、反応状態の中にある特定のキー/値のペアを含むアイテムの数を得る良い方法はありますか？

この方法は、通過するリストが大きくなるとボトルネックを引き起こす可能性があるようです。あなたがあなたの状態の構造を変更しない場合、その後、あなたはをループのいくつかの並べ替えを行うと、カウントしなければならない

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    
 
    this.state = { 
 
     animals: [ 
 
     {type: 'cat'}, 
 
     {type: 'dog'}, 
 
     {type: 'cat'}, 
 
     ] 
 
    }; 
 
    } 
 

 
    render() { 
 
    return(
 
     <div className="app"> 
 
     <Categories state={this.state} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Categories extends React.Component { 
 
    constructor() { 
 
    super(); 
 

 
    this.countItems = this.countItems.bind(this); 
 
    } 
 

 
    countItems(type) { 
 
    var count = 0; 
 
    
 
    for(var i = 0; i < this.props.state.animals.length; i++) { 
 
     if(this.props.state.animals[i].type === type) { 
 
     count++; 
 
     } 
 
    } 
 
    
 
    return count; 
 
    } 
 

 
    render() { 
 
    return(
 
     <div className="categories"> 
 
     <div>Total animals: {this.props.state.animals.length}</div> 
 
     <div>Cats: {this.countItems('cat')}</div> 
 
     <div>Dogs: {this.countItems('dog')}</div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="container"></div>

Answer 1

を、これはあなたが頻繁に呼ぶような方法がある場合は、それはあなたのデータ（動物が）によって、インデックスに役に立つかもしれません変更するたびに更新してください。例えば

：あなたは別のプロパティanimalsPerTypeを作成しますAppコンストラクタで

は：

constructor() { 
    super(); 

    this.state = { 
     animals: [ 
     {type: 'cat'}, 
     {type: 'dog'}, 
     {type: 'cat'}, 
     ] 
    }; 
    this.state.animalsPerType = this.state.animals.reduce(function(acc, animal) { 
     return acc.set(animal.type, (acc.get(animal.type) || []).concat(animal)); 
    }, new Map()); 
    } 

次に、あなたのcountItems方法は簡単になり：

countItems(type) { 
    return this.props.state.animalsPerType.get(type).length; 
    } 

Answer 2

：ここ

は手で問題の簡単な例ですタイプ。あなたが状態でカウントを保持し、一回ごとに animals変化を計算することができ

1. ：パフォーマンスに問題がある場合

   countItems(type) { 
       return this.props.state.animals.reduce((acc, next) => { 
        return next.type == type ? acc + 1 : acc) 
       }, 0); 
       } 
   

   しかし、：

   Aより表現のアプローチは、削減使用するかもしれません

2. あなたは動物のそれぞれのタイプを状態の別々の配列に分割してから、lengthをeac h。

3. このような何かにあなたの状態を変更するには役立つかもしれない：

this.state = { animals: { dogs: [], cats: [] } }