当componentShouldUpdate返回true时，为什么我的react组件不会重新渲染？

问题描述

我在理解生命周期挂钩如何在我的React应用程序中工作时遇到了麻烦。我有一个应用程序，其中将一些道具传递给我的render方法中的分页组件，如下所示：

<Pagination
  totalRecords={this.state.blogPosts.length}
  pageLimit={5}
  pageNeighbours={2}
  onPageChanged={() => {console.log('page changed');}}
/>

在分页构造函数中，我打印出prop值。

const { totalRecords = null,pageLimit = 30,pageNeighbours = 0 } = props;
console.log('totalRecords=',totalRecords); 

它打印出0。

足够公平，我还没有获取我的博客文章。因此，在componentDidMount中，我这样获取博客帖子：

componentDidMount() {
  axios.get('/blogs').then(
    response => {
      if (response.data) {
        const entries = Object.entries(response.data);
        this.setState({ 
          blogPosts: entries.map(p => Object.assign({id: p[0]},{...p[1]}))
            .sort((p1,p2) => p1.updatedAt > p2.updatedAt ? -1 : 1),});
      }
    },err => {
      console.log('err=',err);
    });
}

因此，现在博客文章已被填充，但是分页组件未更新（即使博客本身似乎已更新）。

在这里，我需要一些有关React生命周期挂钩如何工作的指导。状态更改后，渲染方法是否不会重新运行？我期望分页组件将被重新渲染，这一次，totalRecords道具将打印出3（或高于0的某个数字）。构造器即使重新渲染也只能运行一次吗？

以防万一我必须触发重新渲染，我在componentShouldUpdate()方法中运行了此代码：

shouldComponentUpdate(nextProps,nextState) {
  console.log('this.state.blogPosts.length=',this.state.blogPosts.length);
  console.log('nextState.blogPosts.length=',nextState.blogPosts.length);
  return this.state.blogPosts.length !== nextState.blogPosts.length;
}

实际上，this.state.blogPosts.length显示0，而nextState.blogPosts.length显示3。因此它们是不同的，我希望状态会更新为3个博客文章。如果长度不同，则返回true，因此组件应该更新。那不是意味着重新渲染吗？

无论如何，totalRecords仍然为0。我什至在分页组件中设置了一个时间间隔：

setInterval(() => {
  console.log('this.totalRecords =',this.totalRecords);
},5000);

每隔五秒钟，将博客帖子提取并添加到状态后，它就会输出0...。

为什么分页组件不使用totalRecords的新值更新？

解决方法

也许您忘记在componentWillReceiveProps组件中使用Pagination。

componentWillReceiveProps(nextProps) {
  this.setState({ totalRecords: nextProps.totalRecords })
}