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，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>
    );
  }
}

刷新组件2

1 个答案: