javascript - 分派(dispatch)操作和状态更新时组件不重新渲染

Question

当我单击 InspectorOption 组件之一时，我的 redux 记录器显示已分派(dispatch)操作并且状态按预期更新。

我的 InspectorSelect 和子 InspectorOption 组件使用react-redux连接到mapStateToProps，这些组件依赖于来自状态的那些 Prop 。

但是，即使状态正在更新并且组件依赖于状态，当状态更新时组件也不会重新渲染。

为什么我的组件在状态更改时不重新渲染以及如何纠正这个问题？

@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% 的情况下，这是由于 reducer 中 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
    }
}