小道具で関数をコンポーネントに渡す

Question

私は新しい機能に反応し、グローバル関数をコンポーネントに渡して、各コンポーネントで繰り返さないようにしました。それは動作しません、コンポーネントで呼び出すときに私は未定義のエラーが発生します。ここで

は私のコードです：

import React from 'react'; 
//components 
import League from './League'; 
class App extends React.Component { 

state = { 
    leagues: {}, 
}; 

componentDidMount() { 
    this.getLeagues(); 
} 

get(url) { 
    var myHeaders = new Headers(); 
    myHeaders.append("Accept", "application/json"); 
    myHeaders.append("X-Mashape-Key", "mysecretkeyblablabla"); 
    var myInit = 
     { 
      headers: myHeaders 
     }; 

    return fetch(url,myInit) 
    .then(function(response) { 
     if(response.ok) { 
      return response.json().then(function(json) { 
       return json.data; 
      }); 
     } 
    }); 
}; 

getLeagues() { 
    this.get('https://sportsop-soccer-sports-open-data-v1.p.mashape.com/v1/leagues').then((data) => { 
     this.setState({leagues: data.leagues}); 
    }); 
} 

render() { 

    const leagues = Object 
         .keys(this.state.leagues) 
         .map(key => <League get={this.get} key={key} details={this.state.leagues[key]} /> 
        ); 

    return(
     <div className="App"> 
      <div className="App-header"> 
       <h1>Welcome to Foot Stats app (made in ReactJS)</h1> 
      </div> 
      <p className="App-intro"> 
       Here is the place where I should put the countries. 
      </p> 
      <ul> 
       {leagues} 
      </ul> 
     </div> 
    ); 
}; 
} 

export default App; 

と私のリーグのコンポーネント

import React from 'react'; 
import Season from './Season'; 

class League extends React.Component { 

state = { 
    seasons: {}, 
}; 

constructor(props) { 
    super(props); 
} 

componentDidMount() { 
    //this.getSeasonsAvailable(this.props.details.league_slug); 
} 

getSeasonsAvailable(league) { 
    const url = 'https://sportsop-soccer-sports-open-data-v1.p.mashape.com/v1/leagues/{league_slug}/seasons'.replace('{league_slug}',league); 
    const seasons = []; 
    console.log(this.props); 
    this.props.get(url).then((data) => { 
     data.seasons.map(function(object, i) { 
      seasons[data.seasons[i].identifier] = data.seasons[i]; 
     }); 
     this.setState({seasons: seasons}); 
    }); 
}; 

render() { 
    const seasons = Object 
         .keys(this.state.seasons) 
         .map(key => <Season key={key} league_slug={this.props.details.league_slug} details={this.state.seasons[key]} /> 
        ); 
    return (
     <li> 
      <span onClick={this.getSeasonsAvailable.bind(this.props.details.league_slug)}>{this.props.details.nation} : {this.props.details.name}</span> 
      <ul> 
       {seasons} 
      </ul> 
     </li> 
    ); 
} 

static propTypes = { 
    get: React.PropTypes.func.isRequired 
}; 
} 

export default League; 

私は季節のコンポーネントをクリックすると、私はこのエラーを取得：

は、プロパティを読み取ることができません "不定の取得 '

私のconsole.log(this.props)は私にundefinedを返します。

ありがとうございます！

Answer 1

あなたがこれを行うにはES6方法を使用したい場合は、ちょうど、この別に

<span onClick={this.getSeasonsAvailable.bind(this, this.props.details.league_slug)}> 

に

<span onClick={this.getSeasonsAvailable.bind(this.props.details.league_slug)}> 

を変更する必要があります。あなたはarrow functions

<span onClick={() => this.getSeasonsAvailable(this.props.details.league_slug)}> 

使用するかは、あなたがそれhereとhereについてのより詳細な情報を読み込むことができます

constructor() { 
    super(); 
    this.getSeasonsAvailable = this.getSeasonsAvailable.bind(this); 
} 

を使用して、コンストラクタで機能getSeasonsAvailableをbindすることができます。

Answer 2

あなたのonClickので：.bind(this.props.details.league_slug)

実際this.props.details.league_slug何ですか？

bindだけ.bind(this)を試してみて、あなたがthis.props

を呼び出すときに、もちろんあなたは未定義のでしょう（私はそれが何であるかわからないthis.props.details.league_slugへのREFますthis）getSeasonsAvailableでthisの参照を変更、そうしますのgetSeasonsAvailableは、コンポーネント自体を参照することができます。