オブジェクトクラスに基づいてフェッチデータの表示/非表示を切り替えるには、ドロップダウンを作成してください

Question

現在、私はRiot Games APIを呼び出し、すべてのチャンピオンを表示しています。私は名前のセクションでフィルタを追加しましたが、チャンピオンクラスでソートするためにドロップダウンを追加したいと思います。最初のページの読み込みでは、すべてのチャンピオンがレンダリングされます（現在は行っています）。しかし、ドロップダウンからクラスを選択すると、そのクラスを持つチャンピオンのみが表示されます。 {champion.table.tags} で各チャンピオンクラスを表示し、インデックス番号を追加して、これを並べ替えることができます。 {champion.table.tags[0}または{champion.table.tags[1} = "Fighter"の場合ドロップダウンで「Fighter」を選択した場合、「Fighter」のタグを持つすべてのチャンピオンが表示されます。

私は全く新しい反応を示しています。これについてのリアクションの方法と闘っている。

すべてのチャンピオンを示し、ドロップダウンが各チャンピオンのオブジェクトを経由して、すべてのチャンピオンのファーストクラスのタグを移入し、今のようソート機能

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import _ from 'lodash'; 

class Champions extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     champions: [] 
    }; 
    } 

    componentWillMount() { 
    fetch('http://localhost:3000/champ.json') 
    .then(response => response.json()) 
    .then(champions => { 
     this.setState({ champions }) 
    }) 
    } 

    filter(e){ 
    this.setState({ filter: e.target.value}) 
    } 

    render() { 
    let champions = this.state.champions; 
    console.log('champions: ', champions); 

    if(this.state.filter){ 
     champions = champions.filter(champion => 
     champion.table.name.toLowerCase() 
     .includes(this.state.filter.toLowerCase())) 
    } 

    if(this.state.handleChange){ 
     tags = champions.handleChange(champion => 
     champion.table.tags 
    .includes(this.state.handleChange())) 
    } 

    return (
     <div> 
     <div> 
      <input type="text" 
       placeholder="search for a champ" 
       onChange={this.filter.bind(this)} 
      /> 
     </div> 

     <div className="Sort"> 
      <select> 
      {champions.map((champion, i) => 
       <option key={i}>{champion.table.tags[0]} 
       </option>)} 
      </select> 
     </div> 

     <ul className="champ-list"> 
     {champions.map(champion => { 
      return <li key={champion.table.id} className="col-xs-3"> 
      <div> 
       <Link to={`/${champion.table.id}`} > 
       <img src={`http://ddragon.leagueoflegends.com/cdn/7.5.2/img/champion/${champion.table.image.full}`} /> 
       </Link> 
       </div> 
       <Link to={`/${champion.table.id}`} > 
      <h3>{champion.table.key}</h3> 
      <h4>{champion.table.title}</h4> 
      <h4>{champion.table.tags}</h4> 
      </Link> 
      </li> 
     })} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default Champions; 

を持っている私の現在のコード。私はおそらく合計7つのクラスがあり、私は手動で必要に応じて作成することができると思うが、どのようにすべてのチャンピオンを表示することができますし、ドロップダウンの選択に基づいているものだけ。

これが関連しているかどうかはわかりませんが、Reactでは少しでも頭痛があります。 JSONは、134個のオブジェクト（チャンピオン）の配列を返します。各オブジェクトの内部には、いくつかのキー値ペアと、その内部にキー値ペアを持つ配列があります。私が並べ替えようとしているクラスタグは、これらの入れ子配列の1つの内部にあります。

任意のヘルプまたは右方向にもポイントが大幅に

Answer 1

をいただければ幸い自分自身でそれを考え出しました。ここに更新コードがあります

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 
import _ from 'lodash'; 

class Champions extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     champions: [], 
    }; 
    } 


    componentWillMount() { 
    fetch('http://localhost:3000/champ.json') 
    .then(response => response.json()) 
    .then(champions => { 
     this.setState({ champions }) 
     // console.log('setState: ', this.state.champions); 
    }) 
    } 

    filter(e){ 
    this.setState({filter: e.target.value}) 
    } 

    filterChamp(e){ 
    this.setState({filterChamp: e.target.value}) 
    } 


    render() { 
    let champions = this.state.champions; 
    // console.log(champions); 
    // console.log('props: ', this.props); 

    if(this.state.filter){ 
     champions = champions.filter(champion => 
     champion.table.name.toLowerCase() 
     .includes(this.state.filter.toLowerCase())) 
    } 

    if(this.state.filterChamp){ 
     champions = champions.filter(champion => 
     champion.table.tags 
     .includes(this.state.filterChamp)) 
    } 

    return (
     <div> 
     <select onChange={this.filterChamp.bind(this)} value={this.state.filterChamp}> 
      <option value="">All Champs</option> 
      <option value="Assassin">Assassin</option> 
      <option value="Fighter">Fighter</option> 
      <option value="Mage">Mage</option> 
      <option value="Marksman">Marksman</option> 
      <option value="Support">Support</option> 
      <option value="Tank">Tank</option> 
     </select> 

     <input type="text" 
       placeholder="search for a champ" 
       onChange={this.filter.bind(this)} 
     /> 
     <ul className="champ-list"> 
     {champions.map(champion => { 
      return <li key={champion.table.id} className="col-xs-3"> 
      <div> 
       <Link to={`/champ/${champion.table.name}`} > 
       <img src={`http://ddragon.leagueoflegends.com/cdn/7.5.2/img/champion/${champion.table.image.full}`} /> 
       </Link> 
       </div> 
       <Link to={`/${champion.table.id}`} > 
      <h3>{champion.table.key}</h3> 
      <h4>{champion.table.title}</h4> 
      </Link> 
      </li> 
     })} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default Champions;