1
我有一個包含三個組件的搜索頁面。瀏覽主題組件列出了可供選擇的主題。瀏覽文章組件根據主題ID列出所有文章,並在沒有主題標識的情況下加載所有文章。 home組件包含browsetopics和browsearticles組件,並根據所點擊的主題更改其狀態。在componentDidMount()後停止渲染組件()
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>
);
}
}
我需要的是,我希望browseTopics組件停止在父狀態更改上重新呈現。 我嘗試過使用shouldComponentUpdate()(它返回false),但甚至會停止componentDidMount()部件,並且該列表未被填充。
一旦向API發出請求並呈現組件,我希望所有進一步重新呈現browseTopics以停止排序以正常工作。