reactjs - React - 不会在状态更改时重新渲染
问题描述
我是新来的反应。为什么当我的状态发生变化时,我的页面不会在鼠标悬停和鼠标移出时重新呈现?如果我查看console.log
,我可以看到状态变化。但我无法让它工作。这是我的代码:
export default class Nav extends React.PureComponent {
constructor(props) {
super(props);
this.navLevelOneId = '';
this.state = {
showSubMenu: []
};
}
// Mouse over function
handleHover = (id,event) => {
let showSubMenu=this.state.showSubMenu;
showSubMenu[id]=!showSubMenu[id]
this.setState({showSubMenu: showSubMenu}, () => {
console.log(this.state.showSubMenu);
});
}
render() {
return (
<div ref="megaMenu" className="navbar navbar-default navbar-static-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li onMouseOver={this.handleHover.bind(this,0)} onMouseOut={this.handleHover.bind(this,0)}>
<a>Home</a>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,1)} onMouseOut={this.handleHover.bind(this,1)}>
<a className="dropdown-toggle" data-toggle="dropdown">Product Listing</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[1]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
<li className="dropdown menu-large" onMouseOver={this.handleHover.bind(this,2)} onMouseOut={this.handleHover.bind(this,2)}>
<a className="dropdown-toggle" data-toggle="dropdown">Categories</a>
<ul className={"dropdown-menu megamenu row " + this.state.showSubMenu[2]}>
<li>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
<div className="col-sm-6 col-md-3">
<a href="" className="thumbnail">
<img src="http://placehold.it/150x120" alt="test" />
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
);
}
}
解决方案
查看使用和之间的区别。Component
PureComponent
简而言之,PureComponent
对状态变化进行浅层比较。这意味着它只比较状态对象和数组的引用(在你的情况下this.state.showSubMenu
是一个数组,它的引用不会改变,所以 React 不会强制在那里重新渲染)
推荐阅读
- c - 为什么 FreeRTOS 在 osKernelStart 声明后执行“main's”代码?代码调试
- excel - 如何复制一组列并将它们放在VBA中的一组行中
- wordpress - 使用 WooCommerce Rest API 创建带有优惠券行的订单
- azure - terraform:仅将公共 IP 添加到一个 azure VM
- python - 如何使用多个 3D 数组训练回归模型?
- javascript - 根据 JavaScript 中的值设置 CSS 样式
- leaflet - 带有翻转坐标的传单 .png 图像地图?
- android - Drawable 在 Android Studio 的不同活动布局中表现不同
- python - 从 Mixcloud 播放列表 Python Selenium 中提取 URL
- python - 我怎样才能让我的代码重复一个动作?我使用了“for i in range(x):”,但它似乎不起作用