2つの同じコンポーネント内のネストされたオブジェクトで異なる状態を使用する - reactjs

Question

取得したいデータがネストされた状態で識別子がthis.props.groupの場合は、mapStateToPropsでデータをディスパッチまたはキャッチする方法を質問したいと思います親コンポーネントを介してFilmListに渡されます。

// Parent Component 

<Row> 
    <FilmList group="upcoming" groupTitle="Upcoming Movies" /> 
    <FilmList group="top_rated" groupTitle="Top Rated Movies" /> 
</Row> 



// Child Component 
class FilmList extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    componentDidMount(){ 
     this.props.getMovieByGroup(this.props.group); 
    } 

    renderFilmItem(){ 
     if(this.props.data){ 
      var film = this.props.data.upcoming.slice(0,6).map((item) => { 
       return <FilmItem key={item.id} film={item} /> 
      }); 

      return film; 
     } 
    } 
    render(){ 
     console.log('new'); 
     return(
      <div className={styles.filmContainer}> 
       <h1>{ this.props.groupTitle }</h1> 
       { this.renderFilmItem() } 
      </div> 
     ); 
    } 
} 


function mapStateToProps(state){ 
    return { 
     data: state.film.data.upcoming 
    } 
} 

これは私の状態は次のようになります。

これは私の減速である：

const INITIAL_STATE = { 
    data: {}, 
    error: {}, 
}; 


function processData(initialData, data) { 
    let updated = initialData; 
    updated[data.group] = data.results; 
    return updated; 
} 

export default (state = INITIAL_STATE, action) => { 
    switch(action.type) { 
     case GET_FILM_SUCCESS: { 
      return Object.assign({}, state.data[action.data.group], { 
       data: processData(state.data,action.data) 
      }); 
     } 

     case GET_FILM_FAILURE: { 
      return { ...state, error: action.data } 
     } 
    } 
    return state; 
} 

は、現在、私のmapStateToPropsに私が唯一である私が達成したいものをstate.film.data.upcomingにアクセスそのコードのどこかにあるstate.film.data.{this.props.group}のように、 "top_rated" o r "今後の"データ状態の変化。

Answer 1

state.file.data.upcomingが問題なく動作している場合、state.file.dataをmapStateToPropsに、次にstate.file.data[this.props.group]をコンポーネントに使用できるはずです。