React从MUI嵌套菜单关闭Drawer提示toggle is not a function报错求助

你的代码一共有4处需要调整：

1. Appbar.js 中 drawerstate 初始值类型错误，你初始化赋值为布尔值，后续却按对象结构读取left属性
2. SingleLevel 组件中没必要将传入的toggleDrawer函数用useState包裹，直接使用props传入的函数即可
3. toggleDrawer 是高阶函数，调用toggleDrawer('left', false)会返回实际的事件处理函数，点击时需要执行这个返回值才能触发状态更新
4. MultiLevel 组件未接收和透传toggleDrawer属性，导致嵌套层级的子菜单无法拿到关闭抽屉的方法

具体修改代码 #

Appbar.js 修改点 #

将state初始值调整为对象结构：

// 原代码
// const [drawerstate, setDrawerstate] = React.useState(false);
// 修改后
const [drawerstate, setDrawerstate] = React.useState({left: false});

Menu.js 修改点 #

1. 调整SingleLevel组件逻辑：

const SingleLevel = ({ item, toggleDrawer }) => {
  // 删掉useState包裹toggleDrawer的冗余代码
  return (
    <ListItem button onClick={() => { toggleDrawer('left', false)() }}>
      <ListItemIcon>{item.icon}</ListItemIcon>
      <ListItemText primary={item.title}   />
    </ListItem>
  );
};

2. 调整MultiLevel组件的参数和子组件传参：

// 新增接收toggleDrawer参数
const MultiLevel = ({ item, toggleDrawer }) => {
  const { items: children } = item;
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen((prev) => !prev);
  };

  return (
    <React.Fragment>
      <ListItem button onClick={handleClick}>
        <ListItemIcon>{item.icon}</ListItemIcon>
        <ListItemText primary={item.title} secondary={item.description} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {children.map((child, key) => (
            // 透传toggleDrawer给子MenuItem
            <MenuItem key={key} item={child} toggleDrawer={toggleDrawer} />
          ))}
        </List>
      </Collapse>
    </React.Fragment>
  );
};

修改完成后点击最底层菜单项即可正常关闭抽屉，不会再出现toggle is not a function报错。

内容的提问来源于stack exchange，提问作者evan