[英]Why won't my react component re-render when componentShouldUpdate returns true?
I'm having trouble understanding how the lifecycle hooks work in my React application.我无法理解生命周期挂钩如何在我的 React 应用程序中工作。 I have an application in which I pass some props to my Pagination component in my render method like so:我有一个应用程序,我在我的渲染方法中将一些道具传递给我的 Pagination 组件,如下所示:
<Pagination
totalRecords={this.state.blogPosts.length}
pageLimit={5}
pageNeighbours={2}
onPageChanged={() => {console.log('page changed');}}
/>
In the Pagination constructor, I print out the prop values.在分页构造函数中,我打印出 prop 值。
const { totalRecords = null, pageLimit = 30, pageNeighbours = 0 } = props;
console.log('totalRecords=', totalRecords);
It prints out 0.它打印出 0。
Fair enough, I haven't fetched my blog posts yet.公平地说,我还没有获取我的博客文章。 So in componentDidMount, I fetch the blog posts like so:所以在 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);
});
}
So now the blog posts are populated, but the Pagination component doesn't update (even though the blogs themselves seem to update).所以现在博客文章被填充,但分页组件没有更新(即使博客本身似乎更新)。
This is where I need some guidance on how React lifecycle hooks work.这是我需要一些关于 React 生命周期钩子如何工作的指导的地方。 Does the render method not re-run after the state has changed?状态改变后渲染方法不重新运行吗? I'm expecting the Pagination component to be re-render and this time have the totalRecords prop print out 3 (or some number higher than 0).我希望 Pagination 组件重新渲染,这次有 totalRecords 属性打印出 3(或某个大于 0 的数字)。 Does the constructor only run once even if it re-renders?即使重新渲染,构造函数是否只运行一次?
So just in case I have to trigger a re-render, I ran this in the componentShouldUpdate()
method:因此,以防万一我必须触发重新渲染,我在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;
}
Indeed, this.state.blogPosts.length
shows 0
and nextState.blogPosts.length
shows 3
.实际上, this.state.blogPosts.length
显示0
, nextState.blogPosts.length
显示3
。 So they're different, and I'm expecting state to update with 3 blog posts.所以它们是不同的,我期待 state 更新 3 篇博文。 I return true if the lengths are different, which they are, so the component should update.如果长度不同,我会返回 true,它们是,所以组件应该更新。 Does that not mean re-render?这不意味着重新渲染吗?
In any case, totalRecords is still 0. I even set a time interval in the Pagination component:无论如何,totalRecords 仍然是 0。我什至在 Pagination 组件中设置了一个时间间隔:
setInterval(() => {
console.log('this.totalRecords =', this.totalRecords);
}, 5000);
Every five seconds it prints out 0... long after the blog posts have been fetched and added to the state.在博客文章被获取并添加到状态很久之后,它每五秒打印一次 0...。
Why does the Pagination component not update with the new value for totalRecords?为什么分页组件不使用 totalRecords 的新值更新?
Maybe you forgot to use componentWillReceiveProps
in Pagination
component.也许你忘了使用componentWillReceiveProps
在Pagination
组件。
componentWillReceiveProps(nextProps) {
this.setState({ totalRecords: nextProps.totalRecords })
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.