在两个相同组件中的嵌套对象中使用不同的状态-reactjs

我想问一下，如果我想要获取的数据处于嵌套状态，并且标识符将是通过父组件传入的

FilmList

的

this.props.group

，如何调度或捕获

MapStateTops

中的数据

// 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
    }
}

---

目前在我的

mapStateToProps

中，我只访问

state.film.data.comming

我想要实现的是

state.film.data.{this.props.group}

代码中的某个地方，这样它将在“顶级”或“即将到来”时重新呈现组件数据状态更改。

因此，如果

state.file.data.comming

工作正常，那么您应该能够在

MapStateTrops

中使用

state.file.data

，然后在组件中执行

state.file.data[this.props.group]

不知道你想做什么。但是，我可以看到，如果使用state.file.data，.slice（0,6）将失败，因为它不是数组。这就是为什么它没有重新渲染。对不起，已经编辑了我的帖子：）太好了，我很高兴它有帮助！

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;
}