Wie Requisiten mit React/Redux zu aktualisieren, wenn Benutzer einen Container eingibt

Question

Ich habe CompetitionSection, die alle Wettbewerbe aus der Datenbank wiederholt. Klickt der Nutzer auf einen, wird er auf eine Wettbewerbsseite umgeleitet, lädt eine Sekunde lang und rendert die Seite mit allen darin enthaltenen Details. So weit, ist es gut.

Aber wenn Benutzer zurück zur Wettbewerbsabteilung gehen und dann auf den zweiten Wettbewerb klicken, lädt sie sofort den vorherigen Wettbewerb, 0 Ladezeit.

Aus meiner Sicht ist der Fehler, dass die Requisiten der Komponente nicht aktualisiert werden, wenn ich die Komponente rendern (ab dem zweiten Mal). Es ist kein Router-Problem, das war mein erster Instinkt, weil ich sehe, dass sich die route.params entsprechend ändert, aber die Aktionen, die ich zur Änderung der Requisiten absende, werden nicht ausgeführt. Hier ist ein bisschen Code dieser Komponente.

class CompetitionPage extends React.Component { 

componentWillMount() { 
    let id = getIdByName(this.props.params.shortname) 
    this.props.dispatch(getCompAction(id)); 
    this.props.dispatch(getCompMatches(id)); 
    this.props.dispatch(getCompParticipants(id)); 
    this.props.dispatch(getCompBracket(id)); 
} 

render() { 
let { comp, compMatches, compBracket, compParticipants } = this.props 
... 

Ich habe jede Lifecycle-Methode, die ich kenne, ausprobiert. Component Will/Did Mount, Komponente Will/Did update und ich habe shouldUpdate auf true gesetzt und den Trick nicht gemacht. Wie ich es verstehe, wird das Problem mit einer Lifecycle-Methode gelöst werden, um die Aktionen jedes Mal zu verteilen, wenn ein Benutzer Wettbewerbs-Seite eingibt und nicht nur zum ersten Mal. Mir gehen hier die Optionen aus, so dass jede Hilfe geschätzt wird.

HINWEIS: Ich bin ein Neuling bei React/Redux, also weiß ich, es gibt ein paar Dinge dort sind Anti-Pattern/schlecht gemacht.

UPDATE: Hinzugefügt CompetitionsSection

class CompetitionsSection extends React.Component { 

    render() { 
     const {competitions} = this.props; 
     return (
      ... 
      { Object.keys(competitions).map(function(comp, i) { 
      return ( 
       <div key={i} className={competitions[comp].status === 
       undefined? 'hide-it':'col-xs-12 col-md-6'}> 
       ... 
       <Link to={"/competitions/"+competitions[comp].shortName}> 
        <RaisedButton label="Ver Torneo" primary={true} /> 
       </Link> 
       ... 

Answer 1

Es hilft, um besser den Lifecycle-Haken zu verstehen. Eine Komponente wird angehängt, wenn sie auf dem DOM platziert wird. Das kann nur einmal passieren, bis es aus dem DOM entfernt wird. Ein UPDATE tritt auf, wenn neue Requisiten übergeben oder setState aufgerufen wird. Es gibt ein paar Methoden zu behandeln, wenn Aktualisierungen nicht passiert, wenn Sie denken, sie sollten:

1. Stellen Sie sicher, dass Sie Zustand in componentDidMount oder componentDidUpdate verändern. Sie können ein Update in componentWillMount nicht auslösen.

2. Stellen Sie sicher, dass die neuen Stützen oder der Zustand vollständig neue Objekte sind. Wenn Sie ein Objekt in Requisiten durchfahren und nur das Objekt mutieren, wird kein Update ausgelöst. Zum Beispiel würde dies eine Aktualisierung nicht auslösen:

class CompetitionPage extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     competitions: [ compA, compB ] 
    } 
    } 

    triggerUpdate() { 
    this.setState({ 
     competitions: competitions.push(compC) 
    }) 
    } 

componentDidMount() { 
    triggerUpdate() 
} 

render() { 
    return(
    <div> 
     Hello 
    </div> 
) 
} 

Dies ist auf die Tatsache zurückzuführen ist, dass ein neuer Wettbewerb im Zustand an das Array angehängt wird. Der richtige Weg ist, um komplett neues Statusobjekt zu erstellen und ändern, was geändert werden muss:

const newCompetitions = this.state.competitions.concat(compC) 

this.setState(Object.assign({}, this.state, { competitions: newCompetitions })) 

1. Verwenden ComponentWillRecieveProps an einem Update vorherige und aktuelle prop Werte zu vergleichen. Sie können hier SetState wenn aufzuräumen getan werden muss:

Lesen Sie mehr über diese Methode in der Dokumentation Reagieren:

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops