組件在動作分派和狀態更新時無法重新渲染

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 
    } 
}