React, redux Komponente aktualisiert nicht auf Route ändern

Question

Ich habe die Route/Zone /: ID, wenn Sie von/Zone/123 zu/Zone/789 klicken, kann ich erfolgreich eine Aktion versenden, um den neuen Zustand, aber die Die Komponente wird nicht gerendert, um die neuen Daten anzuzeigen.

Ich versuchte adding in a key an die <Link/>, die angeklickt wird, um Routen zu ändern, um ein Update auszulösen, aber das hat nicht funktioniert.

Verfolgt die troubleshooting guide für Reaktion-Redux und denke, ich könnte den Zustand in irgendeiner Weise mutieren?

Vielleicht versuche ich, Routen falsch zu ändern?

Ich haken in die ComponentWillReceiveProps und überprüfen, ob die params.id geändert hat und wenn ich es habe die fetchZone Aktion, um die neue Zone abrufen.

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 zeigt, dass der Staat die neue Zone zurückkehrt, aber nicht die Komponente aktualisieren.

Reducer

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

Wurzel Reducer

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

So Requisiten und redux Zustand zusammen mit Komponentenstatus wird aktualisiert, aber die Komponente nicht nicht wieder machen mit neuen Zonendaten zu sein angezeigt.

Answer 1

Sie sollten setState() in componentWillReceiveProps hinzufügen.

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

Und here ist das Dokument.

Answer 2

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

und dann

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