componentDidMount（）の後のコンポーネントのレンダリングを停止する

Question

私は3つのコンポーネントで検索ページを持っています。ブラウズトピックコンポーネントは、選択するトピックをリストします。 browse articlesコンポーネントは、トピックIDに基づいてすべての記事をリストし、トピックIDがない場合はすべての記事をロードします。ホームコンポーネントは、browsetopicsおよびbrowsearticlesコンポーネントを保持し、クリックされたトピックに従ってその状態を変更します。

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へのリクエストが作成され、コンポーネントがレンダリングされると、sortTopicsのすべての再レンダリングを停止して、ソートが正しく機能するようにします。

Answer 1

docsから：

shouldComponentUpdate()場合はfalseを返し、その後、componentWillUpdate()、render()は、とcomponentDidUpdate()が呼び出されることはありません

私はおそらく私BrowseTopicsコンポーネントを伝えるフラグのいくつかの並べ替えを設定したいと思いますAPIリクエストが作成されたため、コンポーネントの更新が不要/不要になった：

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; 
    } 
    ...