Question

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

我尝试将Snackbar组件移到钩子中，并使用参数渲染完整的快餐栏，但这还是行不通的。

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

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

预期结果：快餐栏应在useSnackbar.js文件中的autoHideDuration中设置的定义超时时间后自动关闭

Answer 1

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

您的handleClose的外观如下：


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

    setOpen(false);
};