当我刷新组件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> 
    ); 
}

}

有些事情可能是错误的，如何构建的东西;当孩子呈现时，您不需要重新呈现父组件。或者，您刷新的页面没有完整的组件集来呈现。 –

答

好像你正在使用路由器，你有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> 
    ); 
    } 
}

那些是生命周期方法，不是吗？可悲的是，我没有研究这个，但我不知道如何使用它们。 – 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

相关推荐