autoHideDuration 在使用挂钩的 Snackbar 中不起作用

Question

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

我试过将 Snackbar 组件移动到钩子中并使用参数渲染完整的 snackbar，但这也没有用。

在这一点上，我刚刚制作了一个自定义组件，它封装了 snackbar 组件和处理程序，并在我的项目中导入了自定义组件。尽管如此，我仍然想找到一个解决方案，说明为什么 autoHideDuration 在第一个解决方案中停止工作

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

预期结果：在 useSnackbar.js 文件

的 autoHideDuration 中设置的定义超时期限后，快餐栏应自动关闭

Answer 1

您遇到了 handleClose 事件的问题。您正在使用一个参数的对象析构 ({ event, reason })，但它必须是两个单独的参数 (event, reason).

您的 handleClose 应该是这样的：


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

    setOpen(false);
};

autoHideDuration is not working in Snackbar using hook