Оба компонента рендеринга со значениями значения 2-го компонента

Question

Я довольно новичок в реагировании, но, к счастью, я смог проделать большую часть моих проблем до сих пор только через документы. Я в настоящее время застрял и могу использовать некоторую помощь.

Цель состоит в том, чтобы вызвать эту глобальную функцию loadFeaturedPlaylist() с помощью гребного винта значения из Tracklist компонента в качестве аргументов, но то, что в конечном итоге происходит, как Tracklist компонентов оказываются с теми же значениями пропа.

Вот как я Треклист компонент создан:

export class Tracklist extends React.Component { 
    static propTypes = { 
     loadFeaturedPlaylist: React.PropTypes.func, 
     playList: React.PropTypes.number, 
     trackList: React.PropTypes.string 
    } 

    constructor(props) { 
     super(props); 
     this.props.loadFeaturedPlaylist(this.props.trackList, this.props.playList); 
    } 

    render() { 
     return(...); 
    } 
} 

Вот страница, которую я планирую вынести 2 разные плейлисты:

export class ListenPage extends React.Component { 

render() { 

    return (
     <div> 
     <section> 
      <Tracklist trackList={'featured'} playList={64347989} /> 
     </section> 

     <section> 
      <Tracklist trackList={'ambient'} playList={49422646} /> 
     </section> 
     </div> 
    ); 
    } 
} 

Я пытался componentWillReceiveProps() в качестве решения, но Нигде не было. Итак, мой вопрос, это более глубокая проблема с функцией loadFeaturedPlaylist() и базовым кодом API, или есть решение React.Component?

EDIT: здесь есть функция для справки:

loadFeaturedPlaylist: (tracklist, playlist) => ({ 
    type: playlistActions.LOAD_FEATURED_TRACKS, 
    payload: { 
     tracklistId: tracklist, 
     playlistId: playlist 
    } 
    }) 

Answer 1

Я должен сказать, что это отличный вопрос. Существует по меньшей мере, один элемент синтаксиса:

constructor(props){ 
// missing } -----> 

Основная проблема заключается вы сделали ваши типы проп статичным.

static propTypes = { 
     loadFeaturedPlaylist: React.PropTypes.func, 
     playList: React.PropTypes.number, 
     trackList: React.PropTypes.string 
    } 

И именно поэтому они распределяются между всеми экземплярами:

<section> 
    <Tracklist trackList={'featured'} playList={64347989} /> 
</section> 

<section> 
    <Tracklist trackList={'ambient'} playList={49422646} /> 
</section> 

Answer 2

Также довольно новый здесь. У меня есть тот же вопрос, что и Дорон Брикман, но предполагая, что функция правильно входит в компонент ... что, если вы дали <Tracklist> a componentDidMount() крючок жизненного цикла и поместили там свою функцию, а не в конструктор?

componentDidMount() { 
    this.props.loadFeaturedPlaylist(this.props.trackList, this.props.playList); 
}