javascript - ReactJs。单击时组件不会隐藏

Question

当我单击按钮时，会显示一个组件。如果再次单击该按钮，该组件不会更改状态。

    state = {
        isActive: true
    } 
    toggleMnu = () => {
        this.setState({isActive: false});
    }; // Show menu function

    hideMnu = () => {
        this.setState({isActive: true});
    }; // Hide menu function

    toggleOnClick = e => {
        e.preventDefault();
        !this.props.hideMnu
            ? this.toggleMnu()
            : this.hideMnu();
    };

    render(){
        return(
            <button type="button" onClick={this.toggleOnClick}>Menu</button>
            {this.state.isActive ? null : <div className="extended-menu-item">
            {menuInfo.map((menuItem ,index)=>{return <ExtendedMenuItem click= {this.hideExtendedNav} {...menuItem} key={index}/>
        })} // The component which shows menu on click   
    )}

Answer 1

这是因为你直接改变了状态。你应该这样做:

this.setState((prevState) => {
  return {isActive: !prevState.isActive}
  // reverse old state ^^
});