Reactjs React.js：可折叠菜单不会返回到原始状态

我还没有反应过来，我想寻求一些帮助

我使用Material Design引导程序制作了一个侧菜单/导航——列表组、列表组项、MDBCollapse、导航链接

代码如下：

    import React, { useState } from 'react';
    import logo from "../assets/sbc-logo.png";
    import { MDBListGroup, MDBListGroupItem, MDBIcon, MDBCollapse, MDBBtn } from 'mdbreact';
    import { NavLink } from 'react-router-dom';

    const sideNavigation = () => {

        const [toggleCollapse, setToggleCollapse] = useState(false);

        return (
            <div className="sidebar-fixed position-fixed">
                {<a href="#!" className="logo-wrapper waves-effect">
                    <img alt="MDB React Logo" className="img-fluid" src={logo}/>
                </a>}
                <br/>
                <MDBListGroupItem class="list-group-item-header" onClick={() => { setToggleCollapse(true); }}>
                    <MDBIcon icon="exchange-alt" className="mr-3"/>
                    Transfers
                </MDBListGroupItem>
                <MDBCollapse id="basicCollapse" isOpen={toggleCollapse}>
                <NavLink to="/inbox" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="inbox" className="mr-2"/>
                        Inbox
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/sent" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="paper-plane" className="mr-2"/>
                        Sent
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/acknowledged" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="thumbs-up" className="mr-2"/>
                        Acknowledged
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/bcpmode" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="power-off" className="mr-2"/>
                        BCP Mode
                    </MDBListGroupItem>
                </NavLink>
                </MDBCollapse>
            </div>
        );
    }

    export default sideNavigation;

从“React”导入React，{useState}；
从“./assets/sbc logo.png”导入徽标；
从'mdbreact'导入{MDBListGroup，MDBListGroupItem，MDBIcon，MDBCollapse，MDBBtn}；
从'react router dom'导入{NavLink}；
常量侧导航=（）=>{
const[toggleCollapse，setToggleCollapse]=useState（false）；
返回(
{}


{setToggleCollapse（true）；}}>
转移
收件箱
发送
承认
BCP模式
);
}
导出默认侧导航；

当我第一次单击侧菜单时，它没有问题。但是，当我再次单击它时，它不会返回。任何建议都会有帮助

---

谢谢。

您没有切换元素，而是将其设置为true，请尝试以下操作：

onClick={() => { setToggleCollapse(toggle => !toggle); }}

嗯，你有

onClick={() => { setToggleCollapse(true); }}

这意味着当你点击它时，无论它是否打开，它都会将它设置为true。单击时，应基于当前值反转该值。此外，您的命名也不太合理，“collapsed”应该是形容词，操作应该是设置该值。比如说：

const [collapsed, setCollapsed] = useState(false);

...

<MDBListGroupItem class="list-group-item-header" onClick={() => { setCollapsed(!collapsed); }}>

const[collapsed，setCollapsed]=useState（false）；
...
{setCollapsed（！collapsed）；}}>