コンテンツをフィルタリングするためのオン/オフの切り替えReact

Question

このリアクションコードは、（タグ配列に含まれる）「タグ」に従って変数をフィルタリングしています。

ただし、フィルタ変数（タグ）のオン/オフを切り替えることはできません。

特定のフィルタをオン/オフにすることができ、そのフィルタのみを適用したいと考えています。

これはどのように達成されましたか？

私の全体のコードは、このcodepen（ http://codepen.io/yarnball/pen/GqbyWr?editors=1010）

私は79行（下）上のアレイに追加する方法をいくつかに持っていると信じているが、私はこの

で成功を持っていませんでした行79：

selectTag: function (tag) { 
    this.setState({ 
     displayedCategories: this.state.displayedCategories.concat([tag]), 
     $push : [newObject] 
    }); 
}, 

私のデータは次のようになります。

"title": "Into the Wild", 
    "tag": [ 
     { 
      "name": "Movie", 
      "taglevel": 1, 
      "id": 1 
     }, 
     { 
      "name": "Adventure", 
      "taglevel": 2, 
      "id": 30 
     }, 
     { 
      "name": "Book", 
      "taglevel": 1, 
      "id": 2 
     } 
    ], 
    "info": [] 
} 

Answer 1

フィルタを切り替えるには、既存のdisplayedCategoriesにタグが存在するかどうかを確認し、タグの配列を調べて削除または追加する必要があります。

通常通り割り当てが混乱の原因にならないように機能的にしようとする私の好みは、私が主に機能的なスタイルを使用します。

---

我々はフィルタ操作を使用することができ、タグの存在を最初に確認します。

var filteredCategories = this.state.displayedCategories 
          .filter(function (existingTag) { 
    return existingTag.taglevel !== tag.taglevel || 
      existingTag.id !== tag.id; 
}); 

これで、渡されたタグと一致しないタグだけがフィルタリングされるようになりました。フィルタリングされたリストが古いリストと同じサイズであるかどうかを確認して、削除したかどうかを調べることができます。あるいは、別の方法でフィルタリングして、someを使用して削除する必要があるかどうかを確認できました。

if (filteredCategories.length === this.state.displayedCategories.length){ 
    // tag wasn't present, add it 
} else { 
    // tag was present, use filtered list. 
} 

私は上記に述べたように、私は機能好むので、私たちは少し異なり、それを行うことができます。

var newCategories = filteredCategories.length === this.state.displayedCategories.length ? 
    filteredCategories.concat([tag]) : 
    filteredCategories; 

し、我々は状態を設定する必要がありますが：TO

this.setState({ 
    displayedCategories: newCategories, 
}); 

---

それらを一緒に組み合わせる：

var filteredCategories = this.state.displayedCategories 
          .filter(function (existingTag) { 
    return existingTag.taglevel !== tag.taglevel || 
      existingTag.id !== tag.id; 
}); 

var newCategories = filteredCategories.length === this.state.displayedCategories.length ? 
    filteredCategories.concat([tag]) : 
    filteredCategories; 

this.setState({ 
    displayedCategories: newCategories, 
});