Question

我想询问如果我想要获取的数据处于嵌套状态且标识符是mapStateToProps传递给this.props.group，是否如何调度或捕获FilmList中的数据{1}}通过父组件。

// 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}沿着该代码一样，所以它会在＆＃34; top_rated＆＃34时重新呈现组件;或＆＃34;即将到来＆＃34;数据状态变化。

Answer 1

因此，如果state.file.data.upcoming工作正常，那么您应该可以在state.file.data中使用mapStateToProps，然后在您的组件中执行state.file.data[this.props.group]。

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

1 个答案: