Question

我有两条路：

/博客
/博客/：蛞蝓

第一条路径的内容显示了指向第二条路径的链接列表。单击链接时，将使用App.js文件中的ReactCSSTransitionGroup显示新页面：

...
const Routes = React.cloneElement(this.props.children, {
      data: data,
      key: path
    });

    return (
      <div id="js-body" className={data.titleColor}>
        <Nav data={ data }/>
        <ReactCSSTransitionGroup
          transitionName={transitionName}
          transitionAppear={true}
          transitionLeave={true}
          transitionAppearTimeout={timeout * 2}
          transitionEnterTimeout={timeout * 2}
          transitionLeaveTimeout={timeout}
          component="div"
          className="animation-container">

          <h2 className="title"><span>{data.pageTitle}</span></h2>
          { Routes }

        </ReactCSSTransitionGroup>
        <Footer data={ data }/>
      </div>
    );

现在我的第二条路径（/ blog /：slug）我检查了slug并打电话给我的商店以获取该帖子的数据。如果没有数据，我会显示404页面，否则我会显示帖子数据。

...

export default class BlogPost extends Component {

  componentWillMount() {
    this._getPageData();
  }

  componentDidMount() {
    const data = this.props.data;
    const pageTitle = (data.page) ? data.page.title : 'Page Not Found';
    document.title = config.site.title + ' | ' + pageTitle;

    // Enable code highlighting
    $('pre code').each(function(i, block) {
      hljs.highlightBlock(block);
    });
  }

  _getPageData(){
    AppDispatcher.dispatch({
      action: 'get-page-data',
      page_slug: 'blog',
      post_slug: this.props.params.slug
    });
  }

  render() {
    ...

    if (!post.fields) {
      return(
        <NoMatch />
      );
    }

    ...


    return (...);
  }
}

问题来自现阶段。当我从有效的/ blog /：slug页面单击Link元素返回/ blog时，在转换发生之前，我当前的帖子会更改为我的404页面，然后转出以显示/ blog页面内容。我做了几个测试，这些是我的发现：

单击Link元素时，BlogPost组件永远不会命中componentWillUnmount生命周期函数
单击Link元素时，BlogPost组件会尝试重新呈现自身。但是，此时/ blog数据已经请求，而不是查找post.fields，因此在转换之前显示404页面。
为404添加额外条件不显示（例如，如果我们知道我们没有确定的帖子，则只显示404），我会收到以下错误：

第一

Warning: There is an internal error in the React performance measurement code. Did not expect componentDidMount timer to start while render timer is still in progress for another instance.

接下来是：

Uncaught TypeError: Cannot read property 'createdAt' of undefined

同样，这些事情正在发生，因为它试图在转换之前重新呈现它，但是已经获取了所请求页面的数据，因此无法找到“已创建”的数据。属性。

为什么我的组件试图根据新组件的请求重新渲染自己的任何想法？

在过渡假期上反应重新渲染

0 个答案: