Sollte ich Aktionen innerhalb von ComponentWillReceiveProps aufrufen?

Question

Mein Instinkt sagt mir Nein, aber ich habe schwer an einen besseren Weg gedacht.

Derzeit habe ich eine Komponente, die eine Liste von Elementen anzeigt. In Abhängigkeit von den vorgesehenen props kann diese Liste ändern (dh Filterwechsel oder kontextuelle ändern)

Zum Beispiel gegeben ein neuen this.props.type, wird der Staat wie folgt aktualisiert werden:

componentWillReceiveProps(nextProps) { 
     if (nextProps.type == this.state.filters.type) return 

     this.setState({ 
      filters: { 
       ...this.state.filters, 
       type: nextProps.type, 
      }, 
      items: ItemsStore.getItems().filter(item => item.type == nextProps.type) 
     }) 
} 

Das ist alles in Ordnung und gut, aber jetzt haben sich meine Anforderungen geändert und ich muss einen neuen Filter hinzufügen. Für den neuen Filter muss ich einen API-Aufruf ausführen, um eine Liste gültiger Element-IDs zurückzugeben, und ich möchte nur Elemente mit diesen IDs in derselben List-Komponente anzeigen. Wie soll ich das machen?

Ich hatte daran gedacht, die entsprechende Aktion von componentWillReceiveProps aufzurufen, aber das scheint nicht richtig zu sein.

componentWillReceiveProps(nextProps) { 
     if (nextProps.type == this.state.filters.type && nextProps.otherFilter == this.state.filters.otherFilter) return 

     if (nextProps.otherFilter != this.state.filters.otherFilter) { 
      ItemsActions.getValidIdsForOtherFilter(nextProps.otherFilter) 
      // items will be properly updated in store change listener, onStoreChange below 
     } 

     this.setState({ 
      filters: { 
       ...this.state.filters, 
       type: nextProps.type, 
       otherFilter: nextProps.otherFilter, 
      }, 
      items: ItemsStore.getItems().filter(item => item.type == nextProps.type) 
     }) 
}, 

onStoreChange() { 
    let validIds = ItemsStore.getValidIds() 

    this.setState({ 
     items: ItemsStore.getItems().filter(item => item.type == this.state.filters.type && validIds.indexOf(item.id) > -1) 
    }) 
} 

Answer 1

-Update 22. Januar 2018:

Vor kurzem ein RFC-PR for React was merged, die componentWillReceiveProps deprecates wie es unsave, wenn in der kommenden Asynchron-Rendering-Modus verwendet werden kann. Ein Beispiel hierfür kann das Aufrufen von Flussaktionen von diesem Lebenszyklus-Hook sein.

die richtige Stelle zu rufen Aktionen (das heißt side effects) nach dem Rendering wird React getan, so dass entweder componentDidMount oder componentDidUpdate bedeutet.

Wenn die Aktion das Abrufen von Daten beabsichtigt, unterstützt React möglicherweise eine neue Strategie für diese Dinge in der Zukunft. In der Zwischenzeit ist es sicher, bei den beiden erwähnten Lebenszyklus-Hooks zu bleiben.