为什么我的Notification通知组件设置duration后无法自动关闭？

你这个情况我遇到过，Ant Design 的 Notification 组件如果用了受控模式，是不会自动关闭的。问题就出在你用了 open 这个受控属性。

Notification 默认是受控组件，也就是说一旦你用了 open 控制显示隐藏，那 duration 就不会生效，必须手动调用 close 才能关掉。这是官方文档里没太说清楚的一个坑。

要解决这个问题有两个办法。第一是别用 open 控制，直接通过调用 notification.open() 来显示，这样 duration 就正常了。第二个是如果你一定要用 open 控制，那就得自己搞个定时器在 duration 时间后把 open 设为 false。

比如这样：


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

useEffect(() => {
if (open) {
const timer = setTimeout(() => {
setOpen(false);
}, 3000);
return () => clearTimeout(timer);
}
}, [open]);

return (
open={open}
message="操作成功"
description="数据已保存"
type="success"
/>
);


性能上来说两种方式差不多，但第一种更符合组件的默认行为，也少写点逻辑。除非你有特别需要受控的情况，不然建议用 notification.open() 方法来触发。

这个问题我之前也踩过。Ant Design 的 Notification 组件的 duration 是以秒为单位接收一个数字，但你这个写法其实传的是个对象：duration={3}，这在 React 中会被当作对象引用，组件内部判断类型的时候发现不是 number 就忽略掉了，但不会报错。

你试试改成直接传值：

<Notification

  open

  message="操作成功"

  description="数据已保存"

  type="success"

  duration={3000}

/>

或者更稳妥的写法：

<Notification

  open

  message="操作成功"

  description="数据已保存"

  type="success"

  duration={3000}

/>

另外，如果你用的是 Ant Design v4 之后的版本，注意 notification.open() 这种函数式调用方式的 duration 单位是毫秒，这点官方文档其实也没写得很清楚，容易搞混。

建议你打印一下 antd 的版本，确认一下是否符合预期。我当时就是因为版本升级后默认单位变了，线上突然一堆 notification 不关闭，排查了好久才发现是这个坑。