Компонент продолжает работать - PullRequest
Новая
       5

Компонент продолжает работать

0 голосов
/ 15 сентября 2018

В моем componentDidMount() я звоню this.props.getPost(soloPost._id);, в этом случае будет использовать приставку.Это работает правильно, потому что, если я console.log это, я получаю желаемый результат.Но componentDidMount() постоянно зацикливается.У меня такое ощущение, что я что-то упускаю в жизненном цикле компонента 

class PostItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showCommentField: false
    };
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    this.setState(prevState => ({
      showCommentField: !prevState.showCommentField
    }));
  }
  componentDidMount() {
    const { soloPost } = this.props;
    this.props.getPost(soloPost._id);
    console.log(this.props.comments);
  }
  render() {
    const { soloPost, classes } = this.props;

    const postContent = (
      <div>
        <CommentFeed postId={soloPost._id} comments={soloPost.comments} />
        <CommentForm postId={soloPost._id} />
      </div>
    );
    return (
      <div className={classes.section}>
        <GridContainer justify="center">
          <GridItem xs={12} sm={10} md={8}>
            <hr />
            <Card plain profile className={classes.card}>
              <GridContainer>
                <GridItem xs={12} sm={2} md={2}>
                  <CardAvatar plain profile>
                    <img src={soloPost.avatar} alt="..." />
                  </CardAvatar>
                </GridItem>
                <GridItem xs={12} sm={8} md={8}>
                  <h4 className={classes.cardTitle}>{soloPost.name}</h4>
                  <p className={classes.description}>{soloPost.text}</p>
                </GridItem>
              </GridContainer>
            </Card>
          </GridItem>
        </GridContainer>
        <GridContainer justify="center">
          <Tooltip
            id="tooltip-tina"
            title="Reply to comment"
            placement="top"
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              color="primary"
              simple
              className={classes.footerButtons}
              onClick={this.onClick}
            >
              <Reply className={classes.footerIcons} /> Reply
            </Button>
          </Tooltip>
        </GridContainer>
        {this.state.showCommentField ? (
          <GridContainer justify="center">
            <GridItem xs={12} sm={5} md={5} lg={5}>
              {postContent}
            </GridItem>
          </GridContainer>
        ) : (
          <div />
        )}
      </div>
    );
  }
}

PostItem.defaultProps = {
  showActions: true
};

PostItem.propTypes = {
  soloPost: PropTypes.object.isRequired,
  getPost: PropTypes.func.isRequired,
  comments: PropTypes.object.isRequired
};

const mapStateToProps = state => ({ comments: state.post.post });

export default connect(
  mapStateToProps,
  { getPost }
)(withStyles(sectionBlogInfoStyle)(PostItem));

РЕДАКТИРОВАТЬ Я только что попробовал это, и оно также зациклилось. 

     shouldComponentUpdate(nextProps, nextState) {
    const { soloPost } = this.props;
    if (nextProps !== this.props) {
      this.props.getPost(soloPost._id);
      return true;
    }
    if (nextState !== this.state) {
      return true;
    }
  }
...