Reagieren - verhindern, dass Lebenszykluskomponenten die gleichen Daten zweimal rendern: WillReceiveProps & componentDidMount

Question

Quick React Frage speziell für Komponenten. Ich bin mit zwei Lifecycle-Methoden:

• componentDidMount() -für das Abrufen von Daten, wenn die Komponente zuerst
• componentWillReceiveProps gemacht wird (nextProps) - um Daten zu aktualisieren, wenn einige Parameter

ändern groß Dies funktioniert. Wenn ich jedoch die Seite mit der Komponente aktualisiere, werden beide Lebenszyklusmethoden ausgeführt, wenn eine ausreicht. Die Daten auf der Seite sind immer noch korrekt, aber es scheint ein bisschen ineffizient. Wie kann ich diese, wenn möglich, mit Lebenszyklen kombinieren?

Im folgenden Beispiel wird fetchTest() zweimal aufgerufen, wenn die Seite aktualisiert wird. Wenn ich componentDidMount lösche, werden die Daten anfangs nicht geladen, wenn der Benutzer die Seite aktualisiert.

Irgendwelche Ideen, wie fetchTest() einmal aufgerufen werden kann, egal wie der Benutzer zur Komponente kommt?

componentDidMount() { 
    fetchTest(this.props.params.id); 
    // for initial component render 
    } 

    componentWillReceiveProps(nextProps) { 
    fetchTest(nextProps.params.id); 
    // for when (params.id) is changed. data within component is updated 
    } 

Answer 1

Sie wollen wahrscheinlich

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