Stop-Darstellung einer Komponente nach componentDidMount()
Habe ich eine such-Seite mit drei Komponenten. Das durchsuchen Themen-Komponente listet die Themen auf, um von zu wählen. Die Artikel durchsuchen Komponente listet alle Artikel auf der Grundlage der Themen-ID und lädt alle Artikel, wenn es keine Themen-id. Die home-Komponente hält die browsetopics und browsearticles Komponente und ändert seinen Zustand nach dem Thema, das geklickt wird.
class BrowseTopics extends React.Component {
constructor(props) {
super(props);
this.topicSelect = this.topicSelect.bind(this);
this.state = {error: "", topics: []};
}
componentDidMount(){
//API call which updates state topics with the list of topics
}
topicSelect(id,e) {
e.preventDefault();
this.props.topicChange(id);
}
render () {
//Rendering list of topics from API and nothing if request has not been sent
}
}
class BrowseArticles extends React.Component {
constructor(props) {
super(props);
this.state = {error: "", articles: [], url: "/api/articles"};
}
componentDidMount() {
if(this.props.topicId){
var url = '/api/topic/'+this.props.topicId+'/articles';
this.setState({url: url});
}
//Make a request to url and get articles
}
render () {
//Renders the list of articles
}
}
class Home extends React.Component {
constructor(props) {
super(props);
this.handleUpdate = this.handleUpdate.bind(this);
this.state = {topicId: ""};
}
handleUpdate(topicId) {
this.setState({topicId: topicId});
}
render () {
return(
<div>
<BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/>
<BrowseArticles user={this.props.user} topicId={this.state.topicId}/>
</div>
);
}
}
Was ich brauche, ist, dass ich die browseTopics Komponente zu stoppen, re-Rendern auf der übergeordneten Zustand zu ändern.
Ich habe versucht, mit shouldComponentUpdate() (also false), aber das Stoppt sogar die componentDidMount () - Teil, und die Liste ist nicht ausgefüllt.
Einmal die Anfrage an die API gemacht ist und die Komponente gerendert wird, möchte ich alle weiteren re-rendering der browseTopics zu stoppen, die Sortierung, um ordnungsgemäß zu funktionieren.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vom docs:
Ich würde wahrscheinlich wollen, legen Sie eine Art flag zu sagen, meine
BrowseTopics
Komponente, die die API-Anforderung gemacht worden ist und ich nicht mehr brauchen/wollen, dass der update-Komponente: