autoHideDuration 在使用钩子的 Snackbar 中不起作用[关闭]

Posted 2023-02-23

【中文标题】autoHideDuration 在使用钩子的 Snackbar 中不起作用[关闭]

【英文标题】：autoHideDuration is not working in Snackbar using hook [closed]

【发布时间】：2019-10-07 00:09:16

【问题描述】：

我在我的 reactjs 项目中的许多地方都使用了 @material-ui 快餐栏；然而，当涉及到 onClose 和 onClick 处理程序时，这会导致代码重复。所以我决定将参数移动到一个钩子上。随后，当我创建钩子并将代码移过来时，autoHideDuration 停止工作。我很好奇为什么？

我尝试将 Snackbar 组件移动到钩子中并使用参数渲染完整的小吃栏，但这也不起作用。

此时我刚刚制作了一个自定义组件，它包含了快餐栏组件和处理程序，并在我的整个项目中导入了自定义组件。尽管如此，我仍然想找到一个解决方案，说明为什么 autoHideDuration 在第一个解决方案中停止工作

我在下面包含了一个错误行为的代码沙箱：

https://codesandbox.io/embed/dreamy-chaplygin-z2jr5nqry3?fontsize=14

预期结果：在 useSnackbar.js 文件中的 autoHideDuration 中设置的定义超时期限后，小吃店应自动关闭

【问题讨论】：

请将相关代码复制到您的 *** 问题中，以便其他人可以提供帮助。如果您的大部分代码都托管在这里，您更有可能得到答案。

【参考方案1】：

handleClose 事件有问题。您正在使用对象破坏 ( event, reason ) 的一个参数，但它必须是两个单独的参数 (event, reason)。

这就是您的handleClose 的外观：

const handleClose = (event, reason) => 
    if (reason === "clickaway") 
        return;
    

    setOpen(false);
;