javascript - 反应。组件未隐藏 onClick

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   
    )}

标签： javascriptreactjs

Answer 1

这是因为您正在直接更改状态。你应该这样做：

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