组件在动作分派和状态更新时无法重新渲染

Question

当我单击某个InspectorOption组件时，我的redux记录器显示分派了一个动作，并且状态如预期更新。

My InspectorSelect和children InspectorOption组件使用react-redux的连接到mapStateToProps，这些组件依赖于来自状态的道具。

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

为什么我的组件在状态改变时不能重新渲染，我该如何纠正？

@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％，这是由于在一个减速

有一个在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 
    } 
}