1

我会尽量让这个尽可能简短和甜美，同时详细和描述性。当我的应用程序第一次初始化或加载时，它会api调用来获取一些blog数据。这或多或少是这样的：

Redux 状态存储

如您所见，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);

这些选择器方法的作用是检查 props 位置路径名 end slug 并使用它来迭代和排列以getBlogItem在. 然后将它们设置为命名的道具并传递给要渲染的道具。该演示组件看起来像这样：getFollowingBlogItemsRedux State StoreblogItemblogItemspresentational component

线框

此演示组件的底部是一些链接，它们将更改 slug 名称。因此，如果我在localhost:3000/blogPosts/blog-post-0并且单击底部的三篇博客文章之一，它会将 url 更改为localhost:3000/blogPosts/blog-post-1or blog-post-2、blog-post-3等。底部的这些博客文章是来自的链接，react-router-dom代码是这样编写的：

<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>

所以想法是它改变了 url 的 slug 并呈现适当的博客文章。然而，这不是正在发生的事情。url slug 确实发生了变化，我什至可以在其中看到container component道具也更新和变化。位置路径名从blog-post-1变为blog-post-2。那么我的问题是为什么我的组件不重新渲染？我知道 的生命周期方法componentWillReceiveProps，但我不知道如何将它与createStructuredSelectorfrom之类的东西结合使用reselect。任何可能给我一条关于我应该如何处理这个问题的明确途径的人将不胜感激！

4

0 回答 0