我对反应完全陌生。当我的状态改变时，为什么我的页面不在鼠标悬停时重新呈现？如果我看控制台。日志，我可以看到状态更改。但我不能让它工作。这是我的密码：

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>


            );

      }

    }