React - 不会在状态更改时重新渲染答案

【问题标题】：React - will not re render on state changeReact - 不会在状态更改时重新渲染
【发布时间】：2018-11-29 13:35:30
【问题描述】：

我是新来的反应。为什么当我的状态发生变化时，我的页面不会在鼠标悬停和鼠标移出时重新呈现？如果我查看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>


            );

      }

    }

【问题讨论】：

您是否尝试将回调传递给这些事件？ () => this.handleHover 而不是？另外，我不确定你是否要绑定handleHover，因为它是一个箭头函数，而箭头函数不知道Object 和关键字this

标签： reactjs

【解决方案1】：

在使用Component 和PureComponent 之间查看the difference。

简单地说，PureComponent 对状态变化进行了浅层比较。这意味着它只比较状态对象和数组的引用（在你的情况下，this.state.showSubMenu 是一个数组，它的引用不会改变，所以 React 不会强制在那里重新渲染）

【讨论】：