Material-UI 的 Snackbar 为什么点关闭没反应?

闲人子诺 阅读 8

我用 Material-UI 写了个 Snackbar,但点了右上角的关闭按钮完全没反应,消息一直卡在页面上。

我已经绑定了 onClose 回调,也设置了 open 状态,但就是关不掉。试过把 setOpen(false) 放进去也不行,是不是哪里漏了?

const [open, setOpen] = useState(true);
const handleClose = () => {
  setOpen(false);
};

return (
  <Snackbar open={open} onClose={handleClose} message="操作成功" />
);
我来解答 赞 2 收藏
二维码
手机扫码查看
1 条解答
UX-建英
UX-建英 Lv1
先检查一下你是否正确地导入了所需的 Hook 和组件。有时候拼写错误或者导入路径不对也会导致这种问题。确保你从 @material-ui/core 或者最新的 @mui/material 导入了 SnackbaruseState

另外,确认一下 handleClose 函数是否真的被调用了。你可以在 handleClose 里加个 console.log 来验证一下,比如这样:

const handleClose = () => {
console.log('Snackbar is closing');
setOpen(false);
};


如果日志没有打印出来,那可能是点击事件没有正确绑定。确保你的 Snackbar 组件渲染正常,没有被其他元素遮挡,或者被其他逻辑阻止了点击事件的触发。

如果这些都没有问题,那就再检查一下是否有其他地方修改了 open 状态,导致它被重新设置为 true。有时候状态管理复杂时,状态会被意外地重置。

如果还是不行,尝试简化一下代码,看看能不能复现问题。有时候把问题缩小范围能更容易找到问题所在。希望这些建议能帮到你。
点赞
2026-03-24 11:25