React、reduxコンポーネントは経路変更時に更新されません

Question

私はroute/zone /：idを/ zone/123から/ zone/789にクリックすると、新しい状態を取得するためのアクションを正常にディスパッチできます。コンポーネントは新しいデータを表示するために表示されません。

<Link/>にはadding in a keyを試してみましたが、これはクリックして更新をトリガーするルートを変更しても動作しませんでした。

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} 

ルートリデューサー

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

だから、小道具やコンポーネントの状態を更新するとともにReduxの状態、まだコンポーネントがない新しいゾーンデータがあることを再レンダリングありません表示されます。

Answer 1

をcomponentWillReceivePropsに追加する必要があります。

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

およびhereが文書である。

Answer 2

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

、その後

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