使用createStructuredSelector更新props时重新呈现组件

Question

我会尝试尽可能简短和甜蜜，同时详细和描述性。当我的应用程序首次初始化或加载时，会进行api调用以获取一些blog数据。以下是或多或少的看法：

正如您所见，api成功返回blogPosts。然后，我使用blogPosts库中的createStructuredSelector在另一个组件中引用这些reselect。这是代码：

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';

import VisionBlogItem from '../../components/VisionBlogItem';
import { getBlogItem, getFollowingBlogItems } from './selectors';

export class VisionBlogItemPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props, context) {
    super(props, context);

    this.state = {
    };

  }

  render() {
    return (
      <div>
        {this.props.blogItem && <VisionBlogItem blog={this.props.blogItem} blogItems={this.props.blogItems} />}
      </div>
    );
  }
}

VisionBlogItemPage.propTypes = {
  dispatch: PropTypes.func.isRequired,
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired,
  }),
  blogItem: PropTypes.object,
  blogItems: PropTypes.array,
};

VisionBlogItemPage.defaultProps = {
  blogItem: {},
  blogItems: [],
};

const mapStateToProps = (state, ownProps) => {
  return createStructuredSelector({
    blogItem: getBlogItem(ownProps.location.pathname.match(/([^/]*)\/*$/)[1]),
    blogItems: getFollowingBlogItems(ownProps.location.pathname.match(/([^/]*)\/*$/)[1])
  });
};

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(mapStateToProps, mapDispatchToProps);

export default compose(
  withConnect,
)(VisionBlogItemPage);

这些选择器方法正在执行的操作getBlogItem和getFollowingBlogItems正在检查props位置pathname end slug并使用它来迭代和数组以在Redux State Store中找到所需的博客。然后，他们将设置为名为blogItem和blogItems的道具，以传递给presentational component进行渲染。该表示组件看起来像这样：

在此演示组件的底部是一些链接，这些链接将更改slug名称。因此，如果我在localhost:3000/blogPosts/blog-post-0并且点击了底部三个博客帖子中的一个，则会将网址更改为localhost:3000/blogPosts/blog-post-1或blog-post-2，{{1}底部的这些博客文章是blog-post-3的链接，代码是这样编写的：

react-router-dom

所以这个想法是它改变了url的slug并呈现了相应的博客帖子。但是，这不是正在发生的事情。 url slug确实发生了变化，我甚至可以在<Link to={props.blogItems[2].fields.slug} style={styles.seeMoreLink}> <img src={props.blogItems[2].fields.articleImage.fields.file.url} style={styles.seeMoreImg} alt="" key="2" /> </Link> 中看到道具更新和更改。位置路径名从container component更改为blog-post-1。我的问题在于为什么我的组件不能重新渲染？我知道blog-post-2的生命周期方法，但我不知道如何将其与componentWillReceiveProps中的createStructuredSelector结合使用。任何人都可以给我一个明确的路径，我想如何处理它，将不胜感激！