React，redux 组件不会在路由更改时更新

Question

我有路由/zone/:id，当从/zone/123点击到/zone/789时，我可以成功调度一个动作来获取新的状态，但是组件没有渲染来显示新的数据。

我尝试adding in a key 到<Link/> 被点击以更改路由以触发更新，但没有奏效。

关注 react-redux 的 troubleshooting guide 并认为我可能会以某种方式改变状态？

也许我试图以错误的方式更改路线？

我连接到 ComponentWillReceiveProps 并检查 params.id 是否已更改，如果已更改，我会发出 fetchZone 操作以检索新区域。

Zone.js

class Zone extends Component{
  constructor(){
    super()

    this.state = {
      zone: {}
    }
  }

  componentDidMount(){
    this.props.fetchZone(this.props.params.id)
  }

  componentDidUpdate(prevProps){
    if (prevProps.zone !== this.props.zone){
      this.setState({zone: this.props.zone})
    }  
  }

  componentWillReceiveProps(nextProps){
    if(nextProps.params.id !== this.props.params.id){
      this.props.fetchZone(nextProps.params.id)
    }
  }

 render(){
   ...
 }

 function mapStateToProps(state){
  return {
      zone: state.zones.zone,
      coordinates: state.zones.coordinates
    }
}

export default connect(mapStateToProps, {fetchZone, getCoordinates})(Zone)

Using react-logger 表示状态确实返回了新区域，但不更新组件。

减速器

case FETCH_ZONE:
  return { ...state, zone: action.payload.data.result}

Root Reducer

const rootReducer = combineReducers({
  zones: ZonesReducer,
  form: formReducer
});

因此 props 和 redux 状态以及组件状态将更新，但组件不会重新渲染并显示新的区域数据。

Answer 1

import {withRouter} from 'react-router-dom'

然后

withRouter(connect(mapStateToProps, {fetchZone, getCoordinates})(Zone))

Answer 2

您应该在componentWillReceiveProps 中添加setState()。

componentWillReceiveProps(nextProps){
    if(nextProps.params.id !== this.props.params.id){
      this.props.fetchZone(nextProps.params.id);
      this.setState(...) // setState here
    }
  }

而here 是文档。