Stop Rendering einer Komponente nach ComponentDidMount()

Question

Ich habe eine Suchseite mit drei Komponenten. Die Komponente "Themen durchsuchen" listet die Themen auf, aus denen Sie auswählen können. Die Komponente "Artikel durchsuchen" listet alle Artikel basierend auf der Themen-ID auf und lädt alle Artikel, wenn keine Themen-ID vorhanden ist. Die Home-Komponente enthält die Komponenten browsetopics und browsearticles und ändert ihren Status entsprechend dem Thema, auf das geklickt wird.

Was ich brauche, ist, möchte ich die BrowseTopics-Komponente zu stoppen Rendering auf Elternstatus ändern. Ich habe versucht, mit sollteComponentUpdate() (was false zurückgibt), aber das stoppt sogar den ComponentDidMount() Teil und die Liste ist nicht ausgefüllt.

Sobald die Anfrage an die API gemacht und die Komponente gerendert wird, möchte ich alle weiteren Rendern von browseTopics stoppen, damit die Sortierung ordnungsgemäß funktioniert.

Answer 1

Von docs:

wenn shouldComponentUpdate() false zurück, dann componentWillUpdate(), render() und componentDidUpdate() nicht wollen

Ich würde wahrscheinlich meine BrowseTopics Komponente eine Art Flag setzen aufgerufen erzählen dass die API-Anforderung erfolgt ist und die Komponente nicht mehr aktualisiert werden muss:

class BrowseTopics extends React.Component { 
    constructor(props) { 
    super(props); 
    this.topicSelect = this.topicSelect.bind(this); 
    this.state = { 
     error: "", 
     topics: [], 
     hasFetched: false // flag for API 
    }; 
    } 
    componentDidMount(){ 
    // API call which updates state topics with the list of topics 
    fetch('myapi.json') 
     .then(res => { 
     // set flag denoting API results have been fetcehd 
     this.setState({ 
      hasFetched: true, 
      topics: <your topics> 
     }); 
     }) 
    } 

    shouldComponentUpdate(nextProps, nextState) { 
    if (this.state.hasFetched) { 
     return false; 
    } 
    return true; 
    } 
    ...