您正在為兩個菜單鏈接維護 1 個狀態(tài)。維護列表的名稱（頁面標題）。在函數(shù)中，使用鍵動態(tài)設置/切換狀態(tài)對象。handlerListOpen

您的代碼和框的工作副本

代碼片段：

export default function App() {

  const [openList, setopenList] = React.useState({});

  const handlerListOpen = el => {

    console.log("el", el.currentTarget.getAttribute("name"));

    const target = el.currentTarget;

    setopenList(prev => ({

      ...prev,

      [target.getAttribute("name")]: !prev[

        target.getAttribute("name")

      ]

    }));

  };

  return (

    <List component={"nav"}>

      {pages.map((page, index) => (

        <List>

          <ListItem name={page.title} button onClick={handlerListOpen}>

            <ListItemIcon>{pages.icon}</ListItemIcon>

            <ListItemText primary={page.title} />

            {openList[page.title] ? <ExpandLess /> : <ExpandMore />}

          </ListItem>

          {page.collapse.map((collapse, index) => (

            <Collapse in={openList[page.title]} timeout="auto" unmountOnExit>

              <li>

                {" "}

                <Link to={collapse.href}>

                  <List component="div" disablePadding key={index}>

                    <ListItem button>

                      <ListItemIcon>{collapse.icon}</ListItemIcon>

                      <ListItemText primary={collapse.title} />

                      <ListItemIcon>

                        <ChevronRightIcon />

                      </ListItemIcon>

                    </ListItem>

                  </List>

                </Link>

              </li>

            </Collapse>

          ))}

        </List>

      ))}

    </List>

  );

}