Question

我使用mapStateToProps通过ID从对象中获取嵌套对象。问题是，当redux存储状态更改时，道具不会更新，并且componentDidUpdate不会触发。

这是我的减速器：

export const programmReducers = (state = initialState, action) => {
    let programms = state.programms;

    switch (action.type) {
        case actionTypes.FETCH_CATEGORIES:
            return Object.assign({}, state, {
                categories: action.payload
            })
        case actionTypes.FETCH_PROGRAMM:
            programms[action.payload.id] = action.payload;
            console.log(programms);
            return {
                ...state,
                programms: Object.assign({}, programms)
            }
        case actionTypes.FETCH_PROGRAMM_COMPONENTS:
            programms[action.programmId].components = action.payload;
            console.log('Added Components')
            return {
                ...state,
                programms: Object.assign({}, programms)
            }
        case actionTypes.FETCH_PROGRAMM_SECTIONS:
            programms[action.programmId].sections = action.payload;
            console.log('Added Sections')
            return {
                ...state,
                programms: Object.assign({}, programms)
            }
        default:
            return state
    }
}

这是我的组成部分：

class ProgrammPage extends Component {

    static async getInitialProps({ store, query: {id} }) {
        if (!store.getState().programm.programms[id]) {
            console.log('Programm not! found');
            await store.dispatch(loadProgramm(id));
            await store.dispatch(loadProgrammComponents(id));
        } else {
            console.log('Programm found')
        }

        return {
            programmId: id
        }
    }

    constructor(props) {
        super(props);

        if (this.props.user) {
            console.log('Loading init!');
            this.props.loadProgrammComponents(this.props.programmId)
            this.props.loadProgrammSections(this.props.programmId);
        }
    }

    componentDidUpdate(prevProps) {
        console.log('Update')
        if (!prevProps.user && this.props.user) {
            console.log('Loading update');
            this.props.loadProgrammComponents(this.props.programmId);
            this.props.loadProgrammSections(this.props.programmId);
        }
    }

    render() {
        return (
            <div>
                <h1>Programm</h1>
                <h2>{this.props.programm.name}</h2>
                <h2>{this.props.programm.id}</h2>
                <h3>Components: {this.props.programm.components ? this.props.programm.components.length : 'None'}</h3>
                <h3>Sections: {this.props.programm.sections ? this.props.programm.sections.length : 'None'}</h3>
                <br></br>
                <h1>User: { this.props.user ? this.props.user.uid : 'None'}</h1>
                <button onClick={() => this.props.loadProgramm('ProgrammLevel2')}>Load Programm</button>
                <button onClick={() => this.props.loadProgrammComponents(this.props.programmId)}>Load Components</button>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {
        programm: state.programm.programms[ownProps.programmId],
        // programms: state.programm.programms <--- Fixed the problem
        user: state.auth.user
    }
}

const mapDispatchToProps = dispatch => bindActionCreators({
    loadProgramm,
    loadProgrammComponents,
    loadProgrammSections
}, dispatch)

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ProgrammPage)

当FETCH_PROGRAMM_COMPONENTS或FETCH_PROGRAMM_SECTIONS的Reducer更改Redux状态时，不会调用componentDidUpdate，并且组件也不会支付更改。

问题似乎与mapStateToProps方法有关，因为当我添加programms: state.programm.programms时一切正常。但是我不需要整个programms对象。

当我仅将嵌套对象映射到props时，为什么组件无法识别程序已更新？

Answer 1

您的问题在programmReducers内，因为您不更改状态，所以组件不会重新呈现。

更改mapStateToProps后，您需要在组件中进行更改。

将programms: state.programm.programms更改为programm: state.programm.programms[ownProps.programmId]

时，下一个代码可能会中断

export const programmReducers = (state = initialState, action) => {
    let programms = state.programms;
    ...
}

所以我猜你的减速器没有达到你的预期。

仅将嵌套的状态对象映射到道具不会更新组件

1 个答案: