为什么当组件应该更新返回 true 时，我的反应组件不会重新渲染？

Question

我很难理解生命周期挂钩在React应用程序中的工作方式。我有一个应用程序，在这个应用程序中，我将一些道具传递给我的呈现方法中的分页组件，如下所示：

<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的新值进行更新？

Answer 1

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

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