コンポーネント2をリフレッシュすると、コンポーネント1を強制的にレンダリングします

Question

Reactでブログプロジェクトを作成しました。オブジェクト（記事）の配列はコンポーネント1からロードされます。コンポーネント1の記事タイトルをクリックし、コンポーネント2（記事全体）に進むとすべてが表示されます。もし私がリフレッシュすると、コンポーネント2とコンポーネント1だけがレンダリングされるので、TypeErrorを取得します：未定義のプロパティ 'title'を読み取ることができません。

コンポーネント1に戻ると、すべてがレンダリングされ、コンポーネント2に再度アクセスできます。ルータのDOMを使用します。

コンポーネント2をリフレッシュすると、コンポーネント1を強制的にレンダリングできますか？ここで

は私のコンポーネント2：

render(){ 
    return (

     <div className="SinglePageContainer"> 
      <div className="SinglePageTitle">{this.props.currentObject.title}</div> 
      <div className="SinglePageDate"><FontAwesome name="clock-o"/> {this.props.currentObject.date}</div> 
      <div className="SinglePageArticle">{this.props.currentObject.text}</div> 
     </div> 
    ); 
} 

}

Answer 1

ルーターを使用していて、とてもComponent1のルート（ArticlesList）とComponent2ための別のルート（Article）を持っているように思え問題は、ArticleListをもう一度レンダリングする必要があるとは限りません。 Articleのデータを取得する作業は、最初のルートからのナビゲーションを開始するときに行いますが、2番目のルートを別のページとしても動作させたい場合はArticleコンポーネントが独自のデータを取得する必要があります。

fetchArticleプロパティをComponent2に渡すことをお勧めします。これは、レンダリングしようとした時点でデータがロードされていない場合に使用できます。また、その記事のデータを受け取るまで、記事のコンテンツをレンダリングしないようにします。

class Article extends React.Component { 
    componentDidMount() { 
    const { articleId, articleData, fetchArticle } = this.props; 
    if (!articleData) { 
     fetchArticle(articleId); 
    } 
    } 

    render() { 
    const { articleData } = this.props; 
    if (!articleData) { 
     return (<div>Loading</div>); 
    } 

    return (
     <div> 
     {articleData.content} 
     </div> 
    ); 
    } 
}