反应：onMouseOut无法更新组件的状态

Question

我在更新控制是否显示子组件的状态时遇到问题。当我将鼠标悬停在下面的ul上时，它可以按预期工作，但是在离开ul元素时，它似乎并没有更新状态，或者至少没有改变子组件的显示。

我有这段代码：

<ul
            className="dropDownBtn"
            onMouseOver={this.showDropDownItems}
            onMouseOut={this.hideDropDownhide}
          >
            Supplements
            {this.state.showStatus ? (
              <HeaderDropDown
                firstChem="Alpha Lipoic Acid"
                secondChem="Melatonin"
                thirdChem="Omega 3"
              />
            ) : null}
          </ul>

在具有以下用于状态控制的功能和声明的组件内部：

constructor(props) {
    super(props);

    this.state = {
      showStatus: false
    };

    this.showDropDownItems = this.showDropDownItems.bind(this);
    this.hideDropDownItems = this.hideDropDownItems.bind(this);
  }

  showDropDownItems() {
    this.setState({
      showStatus: true
    });
  }

  hideDropDownItems() {
    this.setState({
      showStatus: false
    });
  }

这是否与父组件或其他组件的重新渲染有关？谢谢。