2

我有 2 条路径：

  • /博客
  • /博客/：蛞蝓

第一个路径的内容显示第二个路径的链接列表。单击链接时，将使用我的 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 (...);
  }
}

问题就出现在这个阶段。当我单击 Link 元素从有效的 /blog/:slug 页面返回到 /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

同样，这些发生是因为它试图在过渡之前重新渲染它，但是被请求页面的数据已经被获取，因此无法找到“createdAt”属性。

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

4

0 回答 0