Material-UI 的 Snackbar 为啥不自动关闭？

树衡提问于 2026-03-29 15:46:12 阅读 50

组件

我用 Material-UI 写了个 Snackbar，设置了 autoHideDuration={3000}，但消息弹出来后根本不自动消失，得手动点关闭才行。

试过把 open 状态绑定到 useState，也确认传了 onClose 回调，但还是不行。代码大概长这样：

const [open, setOpen] = useState(true);
return (
  <Snackbar
    open={open}
    autoHideDuration={3000}
    onClose={() => setOpen(false)}
    message="操作成功"
  />
);

我来解答赞 11 收藏

反馈

2 条解答

雨泽的笔记 Lv1

我之前也遇到过这问题，open状态初始化为true导致一直开着。把初始值改成false就行，然后在需要显示的时候再设置为true：

const [open, setOpen] = useState(false);

// 显示时调用

setOpen(true);

记得检查触发显示的地方逻辑对不对，这个坑好多人都踩过。

2026-03-31 21:02

FSD-晓红 Lv1

懒人方案：把 open 初始值设成 false，然后在需要显示的时候再手动设置成 true。代码改成这样：

const [open, setOpen] = useState(false);

// 显示时

setOpen(true);



return (

  <Snackbar

    open={open}

    autoHideDuration={3000}

    onClose={() => setOpen(false)}

    message="操作成功"

  />

);

记住，autoHideDuration 只会在 open 从 false 变 true 时生效，别一直让 open 是 true 就行了。

2026-03-29 16:02