當我刷新組件2時強制渲染組件1

我在React中創建了一個博客項目。對象（文章）數組是從組件1加載的。當我單擊組件1中的文章標題，並繼續組件2（整篇文章）時，所有內容都呈現正常。如果我點擊刷新，只是組件2和組件1呈現，所以我得到TypeError：無法讀取未定義的屬性'標題'。當我刷新組件2時強制渲染組件1

如果我回到組件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> 
    ); 
}

}

來源

2017-10-04 Ics

有些事情可能是錯誤的，如何構建的東西;當孩子呈現時，您不需要重新呈現父組件。或者，您刷新的頁面沒有完整的組件集來呈現。 –

好像你正在使用路由器，你有Component1（ArticlesList）的路線和Component2（Article）不同的路線，所以問題不在於您需要再次渲染ArticleList，ArticleList在您從第一條路線開始導航時獲取數據的工作是Article，但如果您希望第二條路線也可以表現爲不同的頁面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> 
    ); 
    } 
}

來源

2017-10-04 13:35:48 jenriquer

那些是生命週期方法，不是嗎？可悲的是，我沒有研究這個，但我不知道如何使用它們。 – Ics

@ics我根據您發佈的問題的解釋回答，但如果您可以提供更多有關您的Component1獲取其數據的位置的更好背景信息。我建議你閱讀[反應文檔]（https://reactjs.org/docs/hello-world.html）以獲取有關組件如何工作的更多上下文。 – jenriquer

正如你上面看到的，在我的組件2中，只需從對象數組中取出當前對象作爲道具：this.props.currentObject和我從對象中使用this.props.currentObject.title，日期和文本。是一個像應用程序的博客。比較。 2當我點擊文章標題時，在主頁面中呈現。我點擊de標題，打開一個新頁面，並打開整個文章。結構：主 - >文章（這裏是地圖功能） - >文章（通過地圖multiplyed）首頁 - > SinglePageArticle（我上面的組件）當我點擊文章鏈接我SinglePageArticle，通過渲染主要與路線路徑。 – Ics

當我刷新組件2時強制渲染組件1

回答

相關問題