无法在 ChakraUI 中使用 useDisclosure() 在同一页面上使用两个模态

Question

chakraUI 提供了一个自定义钩子 useDisclosure() ，它返回isOpen, onClose , onOpen。

  const { isOpen, onOpen, onClose } = useDisclosure()

该的OnOpen被传递到被触发开启模式按钮的onclick。

<Modal isOpen={isOpen} onClose={onClose}>
  ...Modal Code...
<Modal/>

<Button onClick={onOpen}>
  button
<Button/>

现在我想在同一页面上创建另一个模态（比如 reportModal）。为此，我编写了相同的代码，在解构 useDisclosure() 时重命名变量。

const {
        isOpen: { isOpenReportModal },
        onOpen: { onOpenReportModal },
        onClose: { onCloseReportModal },
      } = useDisclosure() 

此外，我通过将这些重命名的变量传递给和组件来使用相同的流程，但 id 不起作用。

任何人的解决方案？提前致谢...

Answer 1

您必须像这样重命名变量。

 const { 
    isOpen: isOpenReportModal, 
    onOpen: onOpenReportModal, 
    onClose: onCloseReportModal 
} = useDisclosure()

现在这应该有效。你所尝试的就像是再次解构。这是错误的。