Question

当我点击我的一个InspectorOption组件时，我的redux记录器显示调度了一个动作，状态按预期更新。

My InspectorSelect和子InspectorOption组件使用react-redux连接到mapStateToProps，这些组件依赖于来自state的那些props。

但即使状态正在更新且组件依赖于状态，组件也不会在状态更新时重新呈现。

当状态发生变化时，为什么我的组件不会重新渲染？如何更正？

@connect((state) => {
    return {
        options: state.inspector.options
    }
})
export default class InspectorSelect extends Component {
    render() {
        return (
            <div>
                {
                    this.props.options.map(option => {
                        return <InspectorOption 
                            option={ option }
                            key={ option.id }
                        />
                    })
                }
            </div>
        )
    }   
}

https://github.com/caseysiebel/dashboard/blob/master/src/components/InspectorSelect.js#L17

Answer 1

正如@markerikson指出： 99.9％的时间，这是由于减速器中Redux状态的意外突变

dashboard/src/reducers/inspector.js

中存在突变

export default function reducer(state = {
    options: [] 
}, action) {

    switch (action.type){
        case 'SET_INSPECTOR': 
            state.options = state.options.map(option => {   // <-- mutation here
                return option.id === action.payload ?
                    { ...option, active: true } :
                    { ...option, active: false }
            })
            return state // returning mutated state
        default: 
            return state
    }
}

应该是

export default function reducer(state = {
    options: [] 
}, action) {

    switch (action.type){
        case 'SET_INSPECTOR': 
            var newOptions = state.options.map(option => {
                return option.id === action.payload ?
                    { ...option, active: true } :
                    { ...option, active: false }
            });
            return {...state, options: newOptions}  // returning new state
        default: 
            return state
    }
}

调度操作和状态更新时，组件不重新呈现

1 个答案: