Question

我正在一个类似博客的网站上工作，并且有一个名为PageDetail的页面，其中包含帖子和评论。

我使用redux获取评论并设置状态。

componentDidMount() {
  this.props.fetchComments(this.props.match.params.id)
  this.setCommentsForCurrentPage()
}

我的状态如下所示。

state = {
  currentPage: 0,
  offset: 0,
  slicedComments: [],
}

我的切片功能如下。

setCommentsForCurrentPage() {
  let slicedComments = this.props.comments
    .slice(this.state.offset, this.state.offset + COMMENT_PER_PAGE)
  this.setState({ slicedComments });
}

我将这些评论传递给评论组件。

<Comments
  comments={this.state.slicedComments}
/>

我的问题是；由于注释设置为异步状态，因此setCommentsForCurrentPage函数将立即运行，并且找不到来自redux的任何注释道具。

这种问题的最佳实践是什么？

谢谢。

Answer 1

尝试在“注释”组件中使用componentDidUpdate方法。由于您的道具会发生变化，因此它将触发重新渲染，并且您的评论应该会显示出来。

componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

`

Answer 2

使用componentDidUpdate生命周期函数而不是componentDidMount来确定何时运行setCommentsForCurrentPage()。将prevProps与当前道具进行比较，如果this.props.comments已更改，请运行setCommentsForCurrentPage()

https://reactjs.org/docs/react-component.html

在componentDidMount（）中进行分页

2 个答案: