在兩個相同組件的嵌套對象中使用不同的狀態 - 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」時重新呈現組件r「即將到來」的數據狀態改變。

Answer 1

因此，如果state.file.data.upcoming工作正常，那麼您應該可以在mapStateToProps中使用state.file.data，然後在組件中使用state.file.data[this.props.group]。