將道具中的函數傳遞給組件

我是新來做出反應並嘗試將全局函數傳遞給組件，以避免在每個組件中重複它。這不起作用，當我嘗試在組件中調用它時會出現未定義的錯誤。將道具中的函數傳遞給組件

這裏是我的代碼：

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。

謝謝！

來源

2017-01-15 banibanc

你只需要改變

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

到

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

從這個

除此之外，如果你想使用ES6的方式來做到這一點。您可以使用arrow functions

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

，或者您可以使用

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

你可以閱讀一下here和here詳細bind功能getSeasonsAvailable在構造函數中。

來源

2017-01-15 10:07:55

太棒了，那有效！謝謝！ – banibanc

高興地幫助:) –

因爲你的onClick：.bind(this.props.details.league_slug)

是什麼this.props.details.league_slug實際？

bind會改變this在getSeasonsAvailable參考（this將裁判this.props.details.league_slug，我不知道它是什麼），當然，當你調用this.props

你會得到不確定的嘗試只是.bind(this)，所以this在getSeasonsAvailable可以引用組件本身。

來源

2017-01-15 09:57:20 CodinCat

將道具中的函數傳遞給組件

回答

相關問題